I need help customizing my theme

Hello,
Help! I'm definitely a newbie to customizing WordPress themes. I may not have picked the best theme from your collection for my purposes. I chose Blue Zinfandel Enhanced because I really needed a three-column theme. As you go through my questions and realize another theme would be better, please let me know.

First, I'm not sure if you can see my site via this support page from my Dashboard, sooooo, here it is: http://www.unitedcreditunion.org/

On to my questions, which I think are mostly easy to fix, but I thought you would be able to answer them quicker than I could figure them out myself :-0 ...

1. How do I change the navigation font color? I want it to be white, but I can't tell which div allows me to do that.
2. How do I change the sub navigation ... background color, width, font size and color, etc.
3. How do I remove the little calendar? It's cute, but this site is mostly going to be static and a date seems irrelevant
4. I need each navigation and some of the subheads to have different information in the left and right sidebars. Can I do that with this theme?
5. I can't seem to get rid of that little white padding or margin between the header and the nav bar. I want them to be flush against each other.
6. I'd like the header to be clickable to return to the home page
7. Once you click on pages from the nav bar, at the bottom of each post it shows (I'm assuming) the next and previous posts. I'd really like that to be specific to each section (i.e. Loans would list Auto Loans in one direction then personal loans in another. Do I need to go to each post and number them in order?
8. If not, how can I remove that feature?
9. And ... I need to change the footer to be more specific to my client. I'm sure that's easy, too ...

Thanks for your help!
Julie

  • Patrick

    Hi @joujouwood

    Welcome to the forums!

    If you are going to be customizing a theme to any extent, this may not the right choice as there really are no customization options at all in this theme. It would all need to be done via manual code in a child-theme.

    If you are comfortable with that, then...

    1. The following CSS added to a child-theme style.css file would change the navigation text to white:
    #nav li a { color:#ffffff; }

    2. For sub-nav items, you need to target the inner list items and their links like so:

    #nav li li { background:#ffffff; }
    #nav li li a { color:#000000; }

    3. To hide the calendar:
    .contentdate { display:none; }

    4. Nope. You'd need a plugin like Widget Logic, or perhaps Dynamic Widgets for that (there are actually loads of plugins available in the WordPress plugin repository to help you customize what displays where):
    http://wordpress.org/plugins/widget-logic/
    http://wordpress.org/plugins/dynamic-widgets/
    http://wordpress.org/plugins/

    5. Again, add to style.css:
    #header { padding-bottom:0; }

    6. The header should be clickable by default (it is on my test site).

    7. That has nothing to do with the theme. That is default WordPress navigation for blog posts. To modify that, you would need a plugin (but I don't know of any offhand).

    8. You can hide it via CSS in the style.css file of your child-theme:
    #post-navigator-single { display:none; }

    9. You would need to copy the footer.php file from the theme to your child-theme and edit it in the child.

    For more on creating a child-theme, see
    http://codex.wordpress.org/Child_Themes

    I hope this helps! And thanks for being a member :slight_smile:

  • joujouwood

    Thank you, Patrick. Your instructions are very clear.
    I have added most of the css using Firebug and then copying it into my custom stylesheet I created. It all works when I test it in Firebug, but when I carry it over to the WP editor (and, yes, save it), nothing happens beyond the customization I had already created. I'm sure it has something to do with the hierarchy, but I've completely confused myself. There appears to be a separate stylesheet just for the navigation, too.

    Maybe this isn't the right parent theme to use for my purposes. I basically need separate "templates" for each of the major navigation headings. In other words, When I click on loans, I want to be able to change the information in the sidebars to reflect ads for loan products. Then in Savings & Checking, I need other information specific to those products. Is there a better theme? Or should I dig into those widget plug-ins you listed? What would you do? I picked this theme because it had the 3-column look I wanted as well as a header area with the main navigation under it.

    Help!
    Thanks!

  • Patrick

    @joujouwood

    Is there a better theme? Or should I dig into those widget plug-ins you listed?

    As a rule of thumb, functionality should be left to plugins, while layout and design is up to the theme. So my recommendation is to use widget plugins to fine-tune and control which widgets display where depending on conditions you set. Creating custom templates for all that would likely only lead to a whole bunch of headaches :slight_smile:

    Also, you mention a custom style-sheet. Are you referring to the style-sheet of a child-theme, or something else? A child-theme is literally a separate theme that simply inherits all of the features of its parent if they are not overridden in the child. See here for everything you need to know about child-themes: http://codex.wordpress.org/Child_Themes

  • joujouwood

    Thanks, again, Patrick. So it sounds like I have a good theme for my purposes and just need to add widget plugins. Do you agree or have another suggestion?

    And, yes, I am referring to the style sheet of the child theme I created, but it appears the parent theme has a nav.css style sheet and I was wondering if that might be the reason that my child theme style isn't working. My main concern now is that my child theme style sheet isn't working. Some parts are, but the codes you suggested, for the most part, aren't overriding the parent theme.

  • joujouwood

    I had activated the child theme. It is definitely listed as the current theme in the dashboard. The image with the eagle in the header is in the child theme's style sheet ...
    #header {
    background-image: url("http://creativejulie.com/3united/wp-content/uploads/2013/07/UCU-WP-header-960x1501.jpg");
    background-repeat: no-repeat;
    height: 150px;
    padding-top: 0;
    padding-bottom: 0;
    }

    That's working fine, as well as some of the other child theme style sheet codes, but the others are not working.

    I see what you mean about the source code, but in the dashboard, it definitely lists the child theme as the current theme. And the child theme style sheet lists blue zinfandel as the parent theme.

    What the heck? Whenever I have a problem, it's never a straightforward answer ...

  • Patrick

    @joujouwood

    Aha! My eyes deceived me; you have named your child-theme "United", correct?

    I see the header image and padding of the child overriding those of the parent just fine in Firebug.

    That's working fine, as well as some of the other child theme style sheet codes, but the others are not working.

    Which ones are not working correctly? You may just need to make your selectors more specific by including a containing element to give it more weight in the child style-sheet than in the parent.

    For example, instead of this:

    #nav li a { color:#ffffff; }

    Try this:

    #custom-navigation #nav li a { color:#ffffff; }

  • joujouwood

    Yes, Patrick, you are correct. The child theme is called "United". And, yes, making my selectors more specific worked. Now that I know where to add the css, I just have to tweak all of those the way I want. Thank you.

    Question ... I notice that the #nav li a is inside the #custom-navigation div. The nav li a is also inside the class widewrap. Would it also be correct to use the widewrap class instead of or in addition to the custom nav div?

    i.e. #custom-navigation .widewrap #nav li a { color:#ffffff; }
    OR .widewrap #nav li a { color:#ffffff; }

    (I'm trying to get the hang of this coding stuff ...)

    Also, back to some of my other questions ... using the same numbering system as above ...

    6. I don't see where this theme allows for a clickable logo (to return to the home page) in the header, there just seems to be a text area in the center that is clickable. So what ends up happening is if someone happens to catch where the text would be, they can click and return home. I'm not sure how to move that to the logo area? Right now, the header area (with the eagle and credit union logo) is all a background image. The logo is not separate from the background. Can you tell me how to add the logo individually overlaying the background image of the header? In the left side of the header? (obviously I would need to redo the image and separate the logo).

    7. You mention that I need a plug in to modify how the blog posts breadcrumbs appear at the bottom of each page. What terminology would I use to search for that plugin?

    9. Copying the footer to the child theme. I know how to do that using FTP. And I know how to get to the editing page in WP .... OK. Now what do I do? I'm just now getting my head around css, I'm not quite ready to jump into php! I would delete the text that's there, right ...? But I want to add some legalese and some logos required by the credit union.

    Thanks for all your help!

  • Patrick

    @joujouwood

    Would it also be correct to use the widewrap class instead of or in addition to the custom nav div?

    No, it is not necessary to declare all parent elements. If all you want to do is increase the specificity of a selector, declaring any parent element usually suffices.

    Here are some of my favorite resources for leaning the basic ins & outs of CSS:
    http://w3schools.com/
    http://www.htmldog.com/
    http://www.html.net/

    A fun little article on CSS specificity:
    http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    And a few articles I wrote last year on wpmu.org you may find of interest:
    https://premium.wpmudev.org/blog/you-dont-need-any-coding-skills-when-working-with-wordpress/
    https://premium.wpmudev.org/blog/css-website-design-wordpress-style-tweaks/
    https://premium.wpmudev.org/blog/wordpress-theme-stylesheets/

    As for your question #6, I'm sorry I did not pick up on that earlier. You have added your image as a background to the #header div, which is not a clickable element. It does contain a linked element within it, but in order to take advantage of that, simply upload your image through Appearance > Header in your wp-admin.

    Question #7: try something like "related posts" or "related content". You'll find a bunch of fun stuff :slight_smile:

    On to #9. Using the WordPress editor is convenient, but you are dependent on not having any server timeouts, ISP hiccups, etc. You may want to download a good simple text editor so you can do your editing on your computer. The when your docs are ready for your site, upload them via FTP. My favorite is by far Notepad++ http://notepad-plus-plus.org/

    As for the edits you want to make, I would recommend leaving the copyright in there:
    &copy; <?php echo gmdate(__('Y')); ?>

    But you can safely delete everything else inside the footer div element without breaking anything. Then add your own content and links in there.

  • joujouwood

    Thank you. I will definitely read through all of the info links you sent. In the meantime ...

    As to the header image (#6), when I add the image via Appearance>Header, it appears BELOW the navigation, rather than above it (which is where I want it). And the area in the theme (I removed the background image from the header div) appears empty. It still has the clickable text area in the middle.

    If you look at how the theme is set up, you can see that the top part only allows for text for the site title and tagline and doesn't seem to allow for a logo to go there. Can I work around this? Or is that a limitation of this theme?

    Before I dig into the footer (scary), I want to make sure I understand you correctly on what I can delete.

    In the footer div, the code says:
    © <?php echo gmdate(__('Y')); ?> <?php bloginfo('name'); ?> <?php if( SHOW_AUTHORS != 'false') { ?>• <?php _e('Using');?> Blue Zinfandel 2.0 theme created by Brian Gardner. <?php } ?><?php if(function_exists('get_current_site')) { $current_site = get_current_site(); $current_network_site = get_current_site_name(get_current_site()); ?>
    <?php _e('Hosted by', 'blue-zinfandel'); ?> site_name; ?>" target="_blank" target="_blank" href="http://<?php echo $current_site->domain . $current_site->path ?>"><?php echo $current_network_site->site_name; ?>
    <?php } ?>
    <?php wp_footer(); ?>

    Soooo, I keep: © <?php echo gmdate(__('Y')); ?>

    and delete everything all the way through <?php wp_footer(); ?>

    Is that correct?

    After that, I haven't got a clue how to mess with php ... I guess I'll be sitting here reviewing that article you wrote about not needing any coding skills when working with WordPress ;-0

  • joujouwood

    On the header, I had originally added the background image to that, using this code:
    #header {
    background-image: url("http://creativejulie.com/3united/wp-content/uploads/2013/07/UCU-WP-header-960x1501.jpg");
    background-repeat: no-repeat;
    height: 150px;
    padding-top: 0;
    padding-bottom: 0;
    }

    However, my problem is that the theme seems to have only one area where it is clickable (dead center). My question is ... is it possible to move that clickable area to the left where the logo currently is on the background image? I'm guessing no, but I just want to be sure.

    Also, I'm going to try to figure out the footer.php part and hope it's not as daunting as it appears. I understand what needs to be left and removed, but I'm not clear on how to add the text and logos via php. It seems like it would work in CSS? No?

    Thanks again!

  • Patrick

    @joujouwood

    Ah, now I see what the problem is with the header image (sorry, didn't take the time to look closely enough before).

    To get the entire header image clickable the way you want it, start by removing the background properties you had added to #header so it becomes this:

    #header {
    height: 150px;
    padding-top: 0;
    padding-bottom: 0;
    }

    Then add the following to your style-sheet:

    #header a {
    background: url("http://creativejulie.com/3united/wp-content/uploads/2013/07/UCU-WP-header-960x1501.jpg") no-repeat scroll 0 0 transparent;
    padding:75px 480px;
    position:relative;
    top:75px;
    }
  • joujouwood

    AWESOME! Thank you! That is a brilliant solution. Everywhere else I read was telling me there was no way to do that! And of course the #header a makes sooo much sense!!

    New question ... I need the title on the home page to appear as "United Credit Union". Right now it just displays the website address. The theme allows for a title but then it appears over the background image (of course). Would I add the title in the theme and then push the location off the screen area? Or do you have an even more brilliant solution?

    I really appreciate your assistance as I work my way through all of the little kinks and tweaks on this!

  • Patrick

    @joujouwood

    I hope you had a good weekend!

    I presume you're referring to what appears in the browser tab (1st screenshot).

    That is likely because the Site Title & Tagline fields are empty under Settings > General in your wp-admin (2nd screenshot).

    You would need to add the site title there to get it to display on the tabs. That will also cause it to display prominently in your header, which you don't want.

    You cannot push that text off the screen without also pushing the background off also, as it's the same html element :slight_smile:

    You would need to copy the header.php file from the parent-theme to the child (if you haven't already done so).

    Then, to allow the title to display in the tabs but not in the header, change line 39 from this:
    <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a><br />
    ...to this:
    <a href="#"></a><br />

  • joujouwood

    Yes I had a nice weekend! Hope yours was good as well.

    Thanks for the code! That worked great.

    I'm still trying to figure out how to change the background on the sub menus. I've tried targeting them every way I can think of. When I changed the background of the sub-menu class using the #custom-navigation, it did change the background, but the list items themselves still have a background. I'd also like the width to be decreased on those sub-menus.

    Also, I have added a plug in that allows me to create tables (I need to list loan rates). I want one of the tables to appear in one of the sidebars, but I'm not sure how the code should read. I know I have to use the text widget. The plug-in provides both short code and php code, but I wasn't sure how to make those appear in the sidebar. Use href, maybe?

    Thanks!

  • Patrick

    @joujouwood

    Lol. No you haven't asked too many questions. :slight_smile:

    We're just very busy these days and some staff members are on holiday.

    I'm not at my office computer right now so can't really give you help just now on the menu css question. But it's a rather easy fix and I'll get back to you on that.

    As for the table in widget, you'd want to use the shortcode in a text widget, yes.

  • Patrick

    @joujouwood

    Me again :slight_smile:

    To get the shortcodes to work in widgets, just add the following to your child-theme's functions.php:
    add_filter('widget_text', 'do_shortcode');

    As for the sub-menu CSS, the background is actually applied to the link within the list element. So you would want to target #nav ul li a like so:

    #custom-navigation #nav li a {
    background: url("http://www.unitedcreditunion.org/wp-content/uploads/2013/07/nav-gradient.png") repeat scroll 0 0 transparent !important;
    color: #102B5E !important;
    }

    The !important property is likely necessary to get your styles to take, because the parent nav.css has it applied too.

  • joujouwood

    Hi Patrick,
    I'm back ... haven't had time to focus on this. And it took me a while to figure out your directions, but I've got it now. I was having problems with the functions.php in the child theme, which I didn't have, but now I understand that I needed to create a blank functions.php with the <php & ?> around the code you gave me, so that worked.

    Also, it turns out that the "!important;" WAS important. And it had to apply to the li li not just the li :slight_smile:

    Now ... I need help with putting stuff in the footer. Basically, it needs to look something like this (minus the "V" in the bottom right corner, no idea what that is) -- http://screencast.com/t/XiNR1Lma1XGA

    I guess the two graphics need to have href tags, but I'm not sure whether there are specific php code that needs to be included in all of this.

    I appreciate your help!

  • Patrick

    @joujouwood

    but now I understand that I needed to create a blank functions.php

    Yah, I didn't specify that part, did I? Oops.

    For your custom footer, try this in the footer.php:

    <div class="alignright">
    <img src="http://path-to-SiteLock-image.png">
    </div>
    
    <div class="alignleft">
    <img src="http://path-to-NCUA-image.png">
    </div>
    
    <div class="aligncenter">
    <?php echo 'All your<br/>additional text<br/>would go here with<br/>breaks tags where<br/>you want new lines'; ?>
    </div>

    You wouldn't need to add any CSS because those div classes are already defined in the theme. :slight_smile:

  • joujouwood

    Thanks again, Patrick ... would I put this code in the <div id="footer">?
    This is what is in the footer right now. What do I need to leave or remove?
    --- Thanks

    <!-- begin footer -->
    <div style="clear:both;"></div> (I was wondering if I need these two divs?)
    <div style="clear:both;"></div>
    </div>
    <div id="footer"> (Is this where your code would go?)

    © <?php echo gmdate(__('Y')); ?> <?php bloginfo('name'); ?> <?php if( SHOW_AUTHORS != 'false') { ?>• <?php _e('Using');?> Blue Zinfandel 2.0 theme created by Brian Gardner. <?php } ?><?php if(function_exists('get_current_site')) { $current_site = get_current_site(); $current_network_site = get_current_site_name(get_current_site()); ?>
    <?php _e('Hosted by', 'blue-zinfandel'); ?> site_name; ?>" target="_blank" target="_blank" href="http://<?php echo $current_site->domain . $current_site->path ?>"><?php echo $current_network_site->site_name; ?>
    <?php } ?>
    <?php wp_footer(); ?>

    </div>
    </div>
    </body>
    </html>

  • Patrick

    @joujouwood

    You can replace the entire contents of the existing footer.php file with the following... change the URLs to your own images of course. :slight_smile:

    <!-- begin footer -->
    
    <div style="clear:both;"></div>
    
    </div>
    
    <div id="footer">
    
    <div class="alignright">
    <img src="http://patrickcohen.me/wp-content/uploads/2013/08/ncua2.png">
    </div>
    
    <div class="alignleft">
    <img src="http://patrickcohen.me/wp-content/uploads/2013/08/ncua1.png">
    </div>
    
    <div style="clear:both;"></div>
    
    <div class="aligncenter">
    <?php echo 'All your additional text would go here with breaks tags where you want new lines'; ?>
    </div>
    
    <br/>© <?php echo gmdate(__('Y')); ?>  <?php bloginfo('name'); ?> 
    
    <?php wp_footer(); ?>
    
    </div>
    
    </div> 
    
    </body>
    
    </html>

    If you want the text aligned to the left instead of centered, simply change the div class to alignleft (the required styles are already in the theme's style-sheet).

    The above code would give you a footer that looks like the screenshot below:

  • joujouwood

    Okey Dokey ... I'm getting there. So I didn't think about this before. The Sitelock graphic is a live code. I know it needs to go in <div class="alignright">, but it's a little confusing because it also has its own div.

    Can you tell me how to add this code to that align right div?

    <div id="sitelock_shield_logo" class="fixed_btm" style="bottom:0;position:fixed;_position:absolute;right:0;"><img alt="malware removal and website security" title="SiteLock" src="//shield.sitelock.com/shield/www.unitedcreditunion.org"/></div>

    Also, how do I move the center div up so it aligns a little better?

    Thanks!

  • Patrick

    @joujouwood

    Can you tell me how to add this code to that align right div?

    You can nest divs inside one another.

    Also, how do I move the center div up so it aligns a little better?

    Ah. I thought you wanted the text below the images. To get it between the 2 images, simply remove the aligncenter div. So your code would look like this:

    <!-- begin footer -->
    
    <div style="clear:both;"></div>
    
    </div>
    
    <div id="footer">
    
    <div class="alignright">
    
    <div id="sitelock_shield_logo" class="fixed_btm" style="bottom:0;position:fixed;_position:absolute;right:0;"><img alt="malware removal and website security" title="SiteLock" src="//shield.sitelock.com/shield/www.unitedcreditunion.org"/></div>
    
    </div>
    
    <div class="alignleft">
    <img src="http://patrickcohen.me/wp-content/uploads/2013/08/ncua1.png">
    </div>
    
    <div style="clear:both;"></div>
    
    <?php echo 'All your additional text would go here with breaks tags where you want new lines'; ?>
    
    <br/>© <?php echo gmdate(__('Y')); ?>  <?php bloginfo('name'); ?> 
    
    <?php wp_footer(); ?>
    
    </div>
    
    </div> 
    
    </body>
    
    </html>

    Also, please remember to change the URL for the other image to one you have hosted on your own site. I will be removing it from my site.

  • Patrick

    @joujouwood

    Whoops, missed this one...

    Remove the div style="clear:both;" from the middle so your code looks like this:

    <!-- begin footer -->
    
    <div style=&quot;clear:both;&quot;></div>
    
    </div>
    
    <div id=&quot;footer&quot;>
    
    <div class=&quot;alignright&quot;>
    <img src=&quot;http://patrickcohen.me/wp-content/uploads/2013/08/ncua2.png&quot;>
    </div>
    
    <div class=&quot;alignleft&quot;>
    <img src=&quot;http://patrickcohen.me/wp-content/uploads/2013/08/ncua1.png&quot;>
    </div>
    
    <?php echo 'All your additional text would go here with breaks tags where you want new lines'; ?>
    
    <div style=&quot;clear:both;&quot;></div>
    
    <br/>&copy; <?php echo gmdate(__('Y')); ?>  <?php bloginfo('name'); ?> 
    
    <?php wp_footer(); ?>
    
    </div>
    
    </div> 
    
    </body>
    
    </html>

    That would give a footer that looks like this screenshot:

  • joujouwood

    Hi Again, Patrick. I kinda had to put this on the backburner, so I'm just now getting back to it occasionally. I removed the clear: both div in the middle. It appears that the sitelock "live code" is anchored to the right side. I suppose that's fine.

    I have a few more teeny little things I need to ask.

    1. When I place the "more" tag inside the WP editor when editing a page, it appears in the editor but not on the actual website page. Is there a trick to that? I thought it was just placed where you want it and then people could click on "more" to open up the rest of the text. Is that maybe a limitation of the theme?

    2. What is your impression of the most recent version of WordPress (3.6)? I didn't want to update it until it was tried for a little while. Do you think it is stable enough to update it (after backing up)?

    3. Kinda the same question for WPMU. The 133 theme pack where I pulled this theme from has an update. It doesn't appear to affect this theme. I actually haven't updated a theme before. I thought when there was an update, there would be a place in the WPMU Dashboard where I can just click "update". Instead, it wants me to download it. So, presumably, I need to re-download the new version to my desktop and then re-upload it to WordPress. Correct? And, in theory, none of the changes you've helped me with will change? (just makes me nervous!)

    Thanks,
    Julie

  • Patrick

    @joujouwood

    It appears that the sitelock "live code" is anchored to the right side.

    That's because there is some inline styling that is forcing it to the bottom right corner. To fix that, remove the styling by changing this:

    <div id=&quot;sitelock_shield_logo&quot; class=&quot;fixed_btm&quot; style=&quot;bottom:0;position:fixed;_position:absolute;right:0;&quot;><img alt=&quot;malware removal and website security&quot; title=&quot;SiteLock&quot; src=&quot;//shield.sitelock.com/shield/www.unitedcreditunion.org&quot;/></div>

    ...to this in your footer.php file
    <div id=&quot;sitelock_shield_logo&quot; class=&quot;fixed_btm&quot; ><img alt=&quot;malware removal and website security&quot; title=&quot;SiteLock&quot; src=&quot;//shield.sitelock.com/shield/www.unitedcreditunion.org&quot;/></div>

    When I place the "more" tag inside the WP editor when editing a page, it appears in the editor but not on the actual website page.

    The tag will not appear on the page/post itself because once readers arrive there, that is where they will expect to read the entire article. The more tag cuts the text off at that point in archive pages, and creates a link to the post/page (screenshot).

    What is your impression of the most recent version of WordPress (3.6)?

    It's perfectly all right to update to 3.6 at this time. All bugs squashed and kinks ironed out. :slight_smile:

    So, presumably, I need to re-download the new version to my desktop and then re-upload it to WordPress. Correct?

    The Farms pack is a special case because it contains several themes. You must download the updated zip file, extract the contents, then re-upload the themes you want to update.

    And, in theory, none of the changes you've helped me with will change?

    As long as you are using a child-theme, your customizations are safe. You won<t lose any edits.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.