Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #23041

    Hi guys,

    I would like to change all of these horizontal dividers with the thicker part at the beginning:

    1) the thick part should be shorter, about 1/3 of the actual size

    2) the thick part should sit on both ends of the line

    3) the whole thing should have one certain colour

    What is the best way to modify this element, & and make it still work “responsively”?

    Thx in advance!

    #118330

    Ok, I found this:

    .seperator-addon {

    width: 3%;

    }

    #top .primary-background.seperator-addon {

    background-color: #XXXXXX !important;

    }

    Which works great … the only thing which is left now is to add the “seperator-addon” at the end of the divider line as well. Is this possible?

    Cheers!

    #118331

    Hi,

    First, edit functions.php then find this code

    $output .= ' <span class="primary-background seperator-addon"></span>';

    Replace it with

    $output .= ' <span class="primary-background seperator-addon"></span><span class="primary-background seperator-addon-end"></span>';

    Add this on your custom.css

    .seperator-addon-end {
    height: 3px;
    width: 70px;
    position: absolute;
    top: 50%;
    right: 0;
    }

    Regards,

    Ismael

    #118332

    Hi Ismael & thanks for the swift reply!

    Unfortunately it did not work 100% :(

    There is a thicker part now sitting at the end of one type of divider, below the line.

    What I would like to achieve is to make all these dividers which have a thicker start (also the full width ones) look the same on both ends.

    Please see the screeshot:

    https://dl.dropboxusercontent.com/u/6710602/lines.png

    Cheers

    #118333

    Hi,

    Replace the css code with this

    .seperator-addon-end {
    height: 3px;
    width: 70px;
    position: absolute;
    top: 49%;
    right: 0;
    z-index: 9999;
    }

    This is what it looks like on my end.

    Regards,

    Ismael

    #118334

    Thanks again Ismael,

    getting there :)

    1) I’ve deleted this from my Custom CSS:

    .seperator-addon {

    width: 3%;

    }

    #top .primary-background.seperator-addon {

    background-color: #XXXXXX !important;

    }

    2) then placed your code and got the following result:

    https://dl.dropboxusercontent.com/u/6710602/divider-02.png

    3) after that I’ve re-added to my custom CSS:

    .seperator-addon {

    width: 3%;

    }

    #top .primary-background.seperator-addon {

    background-color: #XXXXXX !important;

    }

    4) then modified your code to:

    .seperator-addon-end {

    height: 3px;

    width: 3%;

    position: absolute;

    top: 49%;

    right: 0;

    z-index: 9999;

    background-color: #XXXXXX !important;

    }

    Now it looks like this:

    https://dl.dropboxusercontent.com/u/6710602/divider-03.jpg

    So the last bit which is missing is the adaptation of the style of the divider below the logo.

    I’ve created a test template to check the effect of the changes on all relevant dividers, here is the result:

    https://dl.dropboxusercontent.com/u/6710602/divider-test.jpg

    #118335

    And … one last thing … is it maybe possible to add another divider between the open portfolio item and the thumbnails – similar to the layout of Flagship?

    https://dl.dropboxusercontent.com/u/6710602/second-line.jpg

    #118336

    Hi,

    1.) Under the logo. Open header.php and find this code

    <span class="primary-background seperator-addon seperator-bottom"></span>

    Replace it with

    <span class="primary-background seperator-addon seperator-bottom"></span><span class="primary-background seperator-addon-end seperator-bottom"></span>

    Add this on your custom.css

    .seperator-addon-end.seperator-bottom {
    height: 3px;
    width: 70px;
    position: absolute;
    top: 99%;
    right: 0;
    z-index: 9999;
    }

    2.) Separator with text. Just add this on your custom.css

    .supersmall .seperator-addon {
    display: block;
    }

    Regards,

    Ismael

    #118337

    Cool! Great job Ismael!

    I modified your code a tiny litte bit to:

    .seperator-addon-end.seperator-bottom {

    height: 3px;

    width: 3%;

    position: absolute;

    top: 99.5%;

    right: 0;

    z-index: 9999;

    }

    And here is the result:

    https://dl.dropboxusercontent.com/u/6710602/divider-results.jpg

    Exactly what I wanted :)

    May I still ask you how to insert a divider below the selected portfolio item?

    (https://dl.dropboxusercontent.com/u/6710602/second-line.jpg) or is this a question for a new thread?

    Thanks a lot anyways!!!!

    #118338

    Hi,

    You’re using the ajax portfolio, right? Open includes > helper-templates.php, find this code

    echo avia_advanced_hr(false, 'small');
    the_content(__('Read more &rarr;','avia_framework'));
    echo "</div>";

    echo "</div>";

    Replace it with this code

    echo avia_advanced_hr(false, 'small');
    the_content(__('Read more &rarr;','avia_framework'));
    echo "</div>";

    echo "</div>";

    echo '<div class="hr hr_flag"> <span class="primary-background seperator-addon"></span><span class="primary-background seperator-addon-end"></span><span class="hr-seperator extralight-border"></span></div>';

    Regards,

    Ismael

    #118339

    Cool, cool, cool! Job done! Works perfectly!

    https://dl.dropboxusercontent.com/u/6710602/divider-final.jpg

    THANK YOU!!!!!

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

The topic ‘Flag Divider: how to change style & colour’ is closed to new replies.