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

    How can i create my own hr flag and insert it with wherever and with whatever text?

    #69216

    Hey!

    I think my last post here can help you out. The code provided there will add an HR with a flag.

    If you’d like to create an additional flag style you’d have to add all the used classes in your custom.css or Quick CSS and modify each to get your own styling. Let us know if you need help with that.

    Best regards,

    Chris

    #69217

    Thank you that works well. My only other question is how can i easily reduce the padding above & below the flag.

    Here is the page I am working on: http://www.simplybrilliantpress.net/sbpv1/

    I want the icon boxes to be closer to the HR flag.

    Not sure if this will help much but here is the code from the page:

    Code:
    <div class=”hr hr_flag dynamic_el_4″>
    <div class=”primary-background flag”>
    <span class=”flag-text on-primary-color”>Locations</span>
    <span class=”flag-diamond site-background”></span>
    <span class=”mini-seperator extralight-border”></span>
    </div>
    <span class=”hr-seperator extralight-border”></span>
    <span class=”primary-background seperator-addon”></span>
    </div>
    <div>
    [one_fourth first]


    [iconbox title="Castro" icon="sbp-location-pin.png"]

    2336 Market St.
    San Francisco, CA 94114
    Phone: 415-431-6725
    Fax: 415-431-1456
    (Email address hidden if logged out)

    [button link="http://simplybrilliantpress.com/UploadFile.aspx" style="info" border="#000000" text="dark"]Get Quote   [/button]
    [button link="http://simplybrilliantpress.com/UploadFile.aspx" style="download" border="#000000" text="dark"]Upload Files[/button]
    [/iconbox]
    [/one_fourth]

    [one_fourth]

    [iconbox title="Sutter" icon="sbp-location-pin.png"]

    110 Sutter St.
    San Francisco, CA 94104
    Phone: 415-392-6470
    Fax: 415-392-6474
    (Email address hidden if logged out)

    [button link="http://simplybrilliantpress.com/UploadFile.aspx" style="info" border="#000000" text="dark"]Get Quote   [/button]
    [button link="#" style="download" border="#000000" text="dark"]Upload Files[/button]
    [/iconbox]
    [/one_fourth]

    [one_fourth]
    [iconbox title="Sacramento" icon="sbp-location-pin.png"]

    925 Howe Ave.
    Sacramento, CA 95825
    Phone: 916-641-5535
    Fax: 916-641-6713
    (Email address hidden if logged out)

    [button link="http://simplybrilliantpress.com/UploadFile.aspx" style="info" border="#000000" text="dark"]Get Quote   [/button]
    [button link="#" style="download" border="#000000" text="dark"]Upload Files[/button]
    [/iconbox]
    [/one_fourth]

    [one_fourth]

    [iconbox title="Rancho Cordova" icon="sbp-location-pin.png"]

    11225 Trade Center Dr. #300
    Rancho Cordova, CA 95742
    Phone: 916-631-7612
    Fax: 916-631-7683
    (Email address hidden if logged out)

    [button link="http://simplybrilliantpress.com/UploadFile.aspx" style="info" border="#000000" text="dark"]Get Quote   [/button]
    [button link="#" style="download" border="#000000" text="dark"]Upload Files[/button]
    [/iconbox]
    [/one_fourth]
    </div>
    <div>

    #69218

    Hey SBPDrew,

    Try adding the following to your custom.css or Quick CSS. It will adjust the padding on the HR for that single page using the page id.

    #top.page-id-9 .hr_flag {

    padding-top: 10px;

    padding-bottom: 10px;

    }

    Regards,

    Devin

    #69219

    Awesome! Is there a tutorial somewhere on how the CSS of the theme is setup. I’d say i’m an intermediate user of CSS but i don’t understand how the structure of things are setup. For example, “#top.page-id-9 .hr_flag” how are each of the elements in this broken down. How do i find the page id of specific pages, what is #top. How could I have found out on my own that is the id I needed to edit? I guess if there was a tutorial explaining how the advanced CSS elements of the theme work I might be able to make more sense of it.

    Thanks for the help!

    #69220

    Hi SBPDrew,

    There isn’t currently but the best thing to do is use a tool like Firebug for firefox or Chromes built in Inspect Element feature to pick apart the css. The page id is in the class list for the #top div as page-id-#. Its a good simple way to target a specific page and then the class present on that page.

    Also see: http://www.kriesi.at/support/topic/fyi-firebug-tutorial-for-wordpress-users

    Regards,

    Devin

    #69221

    Okay,I’ve been using Chromes built in inspection, i’ll try Firefox and see which I like better.

    I added a few more HR flags and even with adding the following code to my custom.css at 0px. The padding is still to large above the widgets (http://www.simplybrilliantpress.net/sbpv1/) Do the widgets automatically add another paragraph or something?

    #top.page-id-9 .hr_flag {

    padding-top: 10px;

    padding-bottom: 10px;

    }

    how can i reduce the padding between the hr flags and the widgets?

    #69222

    Hello,

    Try this line. :)

    .hr p {
    margin: 0px;
    }

    Regards,

    Ismael

    #69223

    .hr p {

    margin: 0px;

    }

    That didn’t help. Is it possible space is added for a widget title and since i’m not using a title it looks like extra space?

    #69224

    Fixed it with:

    .widget.widget_text {

    padding-bottom:0px

    }

    #69225

    Hey!

    Glad that you found a solution :)

    Best regards,

    Peter

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

The topic ‘HR Flag’ is closed to new replies.