Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #9272

    My question is about the horizontal ruler / line that is by default under the header (logo&menu) section, and the one that you can also add into your own templates. In template builder it is called dafault ruler.

    The left side of it has about 2cm strip that is thicker and uses the theme’s colour. Can this strip be extended to the full lenght of the ruler / line? In other words to create a thicker and coloured line that extends to the width of the whole page?

    #64093

    Hey,

    yes – add following code to css/custom.css:

    .seperator-addon {
    width: 100%;
    }

    #64094

    Many thanks! Did the trick!

    #64096

    Glad that I could help you :)

    #64097

    As a follow up to this post, can I extend that ruler on angular full screen? I added a full screen revolution slider to the front page but it looks strange with the separator above it not being full screen. Can I extend that line and extend the info box to be full screen as well? Thank you!

    #64098

    Hi marklovetv,

    I’m not quite clear on what you mean. Could you provide a link to an example page with the HR and how it should be?

    Regards,

    Devin

    #64099

    The site is padgettchatt.sprocketwebwerks.com. I have been experimenting with different size sliders to try and mitigate the difference in line spacing. The current slider is not full screen but it will be if I can find a solution. I am specifically wanting to make the thin line immediately over the slider full screen and make the info box at the top full screen length if possible.

    #64100

    Hi,

    You can do something like this on your custom.css

    .home .container {
    width: 1100px;
    }

    Regards,

    Ismael

    #64101

    Thanks for the reply! I had actually tried that, but when I do, it pushes the portfolio off center. Any way to bring that back? You can see it at padgettchatt.sprocketwebwerks.com

    Mark

    #64102

    Hi Mark,

    I would just use a background image that fakes the single line. So instead of using a border, you just have a background image that lines up with the area you want it to be.

    As for actually adjusting it to full screen, its unfortunately a bit beyond the scope of what we can directly offer through support. There will need to be quite a bit of customization to keep everything working cross browser and responsive.

    Regards,

    Devin

    #64103

    What about creating a custom color for this divider? and also the lines/dividers in the portfolio section with the +/-/x in the upper right corner when you click on a portfolio section

    #64104

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #top #header .container {
    border-color: #444;
    }

    Just adjust the hex code for the border color and that will change it for the header bottom border.

    For the ajax portfolio:

    #top .ajax-control a {
    border-color: #444;
    }
    .ajax_slide .inner_slide {
    -moz-box-shadow: 0 0px 2px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0px 2px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0px 2px 0 rgba(0,0,0,0.2);
    }

    The box for the actual portfolio item gets its border from the box shadow so you’ll have to change it using RGBA values.

    Regards,

    Devin

    #64105

    Thanks! I’ll give it a try!

    #64106

    Hi!

    Great, let us know if it works out or not.

    Regards,

    Peter

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Horizontal Default Ruler – Angular theme’ is closed to new replies.