Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #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?



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

    .seperator-addon {
    width: 100%;


    Many thanks! Did the trick!


    Glad that I could help you :)


    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!


    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?




    The site is 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.



    You can do something like this on your custom.css

    .home .container {
    width: 1100px;




    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



    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.




    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


    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.




    Thanks! I’ll give it a try!



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



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

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