Custom images BP Daily

I would like to use images for my navigation bar and some elements while using custom styling (default theme). Is this possible and if so where would I reference those images? I have looked through the images and the .css files and see a custom one, which I assume populates with your custom style, but with no styling that is blank.

This being quite a complicated theme I have no idea how to do this.

Please help.

  • Tammie

    @AquaPebble: It will be changing the font on the front it just shows a drop down with that item first that is all - check your site you will see the font change (assuming you have that font on your computer as you may not have all).

    You can look in the source code of your page and you should for instance see:

    body {
    background: #f9f9f9;
    background: #f9f9f9;
    color: #222222;
    font-family: Lucida Grande, Lucida Sans, sans-serif;
    }

    As for adding your own images you can do that of course using either the preset options (there are some for navigation background) or the child theme. It really depends on what as to how. May I suggest you look under theme options see if that works and if not consider the child theme route and using firebug to find the elements.

    Here are a few tutorials that should help you:

    http://buddydress.com/2010/06/firebug-installing-discovering-and-using-the-tutorial/

    http://buddydress.com/2010/05/parent-and-child-themes-explored/

  • AquaPebble

    @Tammie. I am using BP Daily Child (should have said that)

    I have pre-set style set to default and using the custom styling (I don't want to use the pre-set styles). With this option is there a way to use custom images for nav bars?

    Otherwise do I have to use my custom styling and create another child theme? I have created a child theme for a straight forward theme, but not a complex one like this...so don't think it is best option for me with limited skill in this area.

    I was hoping to put images in a folder and be able to call them from a css or file.

    The other thing I was thinking of was coping one of the pre-set styles and create a new colour scheme and images. But wasn't sure how I would add it.

    Also have firebug installed as you advised before. :smiley:

  • Tammie

    @AquaPebble: When I said use the child you just use the child that comes with it - no need to make a new one :slight_smile: Now you can change colours of navigation using theme options but no you can't do backgrounds. For that it's going to be firebug and adding the style into your child file.

    You'd be interested in the following classes:

    .page-navigation {
    background:none repeat scroll 0 0 #D0D0D0;
    border-top:1px solid #FFFFFF;
    }

    #category-navigation {
    background:none repeat scroll 0 0 #666666;
    border-top:1px solid #FFFFFF;
    }

  • AquaPebble

    @Tammie

    I tested putting a background image for the category navigation. I see that only shows where I don't have a menu button. When I inspect the menu button a number of different css references come up. I gather I have to create an image for that menu button and a hover version as well as a background image.

    I am just a bit confused exactly which css classes I need to change to for the menu buttons.

  • Tammie

    @AquaPebble: Sorry are you trying to now change the navigation drop downs? If do you need to look at sfmenu elements (layout.css):

    /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
    .sf-menu {
    text-align: left;
    text-transform: uppercase;
    }
    .sf-menu ul {
    position: absolute;
    top: -999em;
    width: 10em; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li {
    width: 100%;
    }
    .sf-menu li:hover {
    visibility: inherit; /* fixes IE7 'sticky bug' */
    }
    .sf-menu li {
    float: left;
    position: relative;
    }
    .sf-menu a {
    display: block;
    position: relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    left: 0;
    top: 40px; /* match top ul list item height */
    z-index: 998;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
    top: -999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
    }

    /*** DEMO SKIN ***/
    .sf-menu {
    float: left;
    }

    .sf-menu a {
    padding: 9px 10px;
    text-decoration:none;
    }

    /*** arrows **/
    .sf-menu a.sf-with-ul {
    padding-right: 2.25em;
    min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
    }
    .sf-sub-indicator {
    position: absolute;
    display: block;
    right: .75em;
    top: 1.05em; /* IE6 only */
    width: 10px;
    height: 10px;
    text-indent: -999em;
    overflow: hidden;
    }
    a > .sf-sub-indicator { /* give all except IE6 the correct values */
    top: .8em;
    background-position: 0 -100px; /* use translucent arrow for modern browsers*/
    }
    /* apply hovers to modern browsers */
    a:focus > .sf-sub-indicator,
    a:hover > .sf-sub-indicator,
    a:active > .sf-sub-indicator,
    li:hover > a > .sf-sub-indicator,
    li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px; /* arrow hovers for modern browsers*/
    }

    /* point right for anchors in subs */
    .sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
    .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
    /* apply hovers to modern browsers */
    .sf-menu ul a:focus > .sf-sub-indicator,
    .sf-menu ul a:hover > .sf-sub-indicator,
    .sf-menu ul a:active > .sf-sub-indicator,
    .sf-menu ul li:hover > a > .sf-sub-indicator,
    .sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
    }

    /*** shadows for all but IE6 ***/
    .sf-shadow ul {
    background: url('../../library/styles/images/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
    }
    .sf-shadow ul.sf-shadow-off {
    background: transparent;
    }

  • AquaPebble

    Basically I don't want those nav bars a flat colour I would prefer a gradient. So to do that I think I need to use images. I replaced the background with an image and it worked fine except the menu part still stays the flat colour. (I have removed the image since)

    The other thing I am trying to figure out is: the post headings on the front page 'rows' and posts in the tabs use the same class the links in the body do. I want to change the ones in the body to a colour but not the post headings on the front page, so I am going to have to create another link classes for the headings in the child css, and have been scouring through the files to see where the reference would be.

  • Tammie

    @AquaPebble: Ok then you want to look at the navigation element background:

    #category-navigation{
    border-top: 1px solid #ffffff;
    background-color: #666666;
    }

    #category-navigation .sf-menu a {
    border-right: 1px solid #ffffff;
    }

    #category-navigation .sf-menu a, #category-navigation .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: #ffffff;
    }
    #category-navigation .sf-menu li {
    background: #666666;
    }
    #category-navigation .sf-menu li li {
    background: #666666;
    }
    #category-navigation .sf-menu li li li {
    background: #666666;
    }
    #category-navigation .sf-menu li:hover, #category-navigation .sf-menu li.sfHover,
    #category-navigation .sf-menu a:focus, #category-navigation .sf-menu a:hover, #category-navigation .sf-menu a:active, #category-navigation .sf-menu .current_page_item, #category-navigation .sf-menu .selected{
    background: #d0d0d0;
    color: #666666;
    outline: 0;
    }

    By headers this should be able to be done using theme options? I'm a little bit puzzled what you want to have on them though. If it's specific ones posttitle should get it but you may have to do a .classname .class inheritance for instance call it the class above to unique ones to create new styles without editing code.

    An example of this is in the content rows:

    .dark-container h4{}

  • AquaPebble

    @Tammie

    I set up the heading colours to all weird and wonderful colours just to see where they are. However, on the front page it is not using these colours it uses the links colour for the post headings as these are links to the posts. And they change the links visited and hover colours.

    So I am trying to figure out how not to have that happen.

    btw: is there no heading 2 used as no matter what colour I put in there the field goes blank after I save?

  • AquaPebble

    @Tammie

    I am doing most of the changes in the child theme css now. Some things have been easy to find and some more tricky. But I am getting the hang of it.

    What I haven't done is created a new links class so I have one for those headings and one for the rest of the site. What I don't know what to do is once I have created this new class where in the theme I need to change to refer to the new class for those headings.

    Please forgive me if the terminology isn't 100%.

  • AquaPebble

    @Tammie

    I am having not luck in getting those heading links to change on the front page. I have tried a number of variations in the child css and none work. Please could you help with this.

    Here are some I have tried (just using hover for this example):

    h3:hover { attributes that go in here; }
    .padder h3:hover { attributes that go in here; }
    div.padder h3:hover { attributes that go in here; }
    h3 a:hover {attributes that go in here; }
    h3 a,h3 a:hover {attributes that go in here;}

    And there are more. I have searched on the Internet for a solution, but none of what I find works.

  • AquaPebble

    @Tammie

    I gathered you were away, I hope you had a good rest and it wasn't all work :slight_smile:

    I think that was the last one I tried as I found that format in daily.css for h1. Will double check though.

    I have done as you suggested earlier (or at least my understanding) and selected the daily theme instead of default and making all the changes I want in the child css.

    Here is the link http://ukmarketingnetwork.com

    I want to change the headings of the posts that appear when you have rows selected. I want them to have their own link colours not the standard link colours. When I inspected them they are h3. I probably am going to want the h4 in the tabs to be the same link colours as these h3.

    Some of the heading currently visible are:
    Longest @ address in the world
    Facebook and its loneliess

  • Tammie

    @AquaPebble: Hmmm still see a javascript error in firebug that means your site takes a while to load - I'd suggest you sort that out.

    However, here are the CSS classes:

    .padder h3, h2.pagetitle {
    background:none repeat scroll 0 0 #F9F9F9;
    border:1px solid #F3F3F3;
    color:#111111;
    }
    daily.css (line 219)
    h3 {
    font-size:16px;
    padding:5px 10px;
    }

    Of course you'd add a a:hover / a, a:link, a:visited to those depending on what you wanted.