WordPress.org

1. ieatwork
   Member
   Posted 7 months ago #

   I am setting up biography pages on my website for each exhibitor of the event I am involved with.

   Here is an exhibitors page: http://www.circus11.com/wordpress/?page_id=146

   On the main website sections 'HOME, LINE-UP, ABOUT' etc I want the alternating header images to stay, but on each exhibitors page I want to be able to select a certain header image to display the exhibitor's work.

   Does anyone know how I can do this? I think I may have to edit or input some code into the function.php

   [Code moderated as per the Forum Rules. Please use the pastebin]

2. Marventus
   Member
   Posted 7 months ago #

   Hi,

   Take a look at Conditional Tags. Basically, you need something like this:

   <?php
   if (is_home() || is_page('bla') || is_page('bla') {
   Alternating images
   }
   elseif is_page('bla') || is_page('bla') etc. {
   Static images
   }

   Where bla is the ID number of the targeted page, and || stands for OR.

3. ieatwork
   Member
   Posted 7 months ago #

   Thanks Marventus,

   Where would I need to insert this code? Into the header.php?

4. Marventus
   Member
   Posted 7 months ago #

   Yes, header,php. Sorry I forgot to specify that.

5. ieatwork
   Member
   Posted 7 months ago #

   Sorry to keep bugging you, but could you have a look at my header.php code and indicate where I should insert the code?

   I am on a deadline to finish this site and this is the only issue which is holding me back from getting it online! :-)

   [Code moderated as per the Forum Rules. Please use the pastebin]

6. Marventus
   Member
   Posted 7 months ago #

   Sure, I can take a look, but you should use Pastebin in the future for pasting more than 10 lines of code, as per the forum guidelines.
   So please do that and share your pastebin link.
   Thanks!

   Edit: Oh, also, one question: do you want static images on Exhibitor pages only?

7. ieatwork
   Member
   Posted 7 months ago #

   Here is my Pastebin link as requested: http://pastebin.com/DZ7RTFbj

   Hope it works and thanks so much for taking the time to help me!

8. Marventus
   Member
   Posted 7 months ago #

   Did you see my question on the Edit above?

9. ieatwork
   Member
   Posted 7 months ago #

   Yes just static images on Exhibitor pages.

   In fact the only pages which require the random image rotation is About and Contact.

10. ieatwork
    Member
    Posted 7 months ago #

    Did the Pastebin link work ok for you?

11. Marventus
    Member
    Posted 7 months ago #

    Ok, I took a look at your header. Based on what I've seen, the header checks whether the page has a featured image associated to it, and if no image is found, it displays the header images.
    What happens if you add a featured image to the pages in which you want static images?

12. ieatwork
    Member
    Posted 7 months ago #

    I have just added a featured image to an Exhibitor page and this is how it displays: http://www.circus11.com/wordpress/?page_id=126

    For some reason it has duplicated the image, with the top one replacing the header image with my logo on.

    Hmmm...

13. Marventus
    Member
    Posted 7 months ago #

    Oh, a couple of things on the side:
    1. Static urls:
    I noticed you used several static URLs in your header.php. It is always preferable to use dynamic ones, so when you move your site from a local or test environment to a live one, things don't break. You should replace all your:
    

    http://circus11.com/wordpress

    with
    

    <?php bloginfo( 'siteurl' );?>

    2. Current menu items:
    Your current styles for menu items with child items are working a little off. For instance, when you click on the "Exhibitors" page, all your sub-items are displaying a current or hover state.

14. ieatwork
    Member
    Posted 7 months ago #

    I think this might have something to do with me duplicating the 'branding' div in the header.php

    You'll see I called the duplicate 'branding2'.

    The header image with the logo on just needs to be static and remain in the same place on each page. Is there some simple code I can insert to achieve this rather than duplicating the branding div?

15. ieatwork
    Member
    Posted 7 months ago #

    Thanks for the tip regarding static URLs. Will I need to change these in just the header.php or do I need to do it for every php file with URLs in?

16. Marventus
    Member
    Posted 7 months ago #

    I just saw your last post.
    That happened because you are using the exact same code for your logo and for your page images.
    Since your logo is static, you don't really need the default code inside your branding div.
    Replace the entire contents of that div with:
    

    <img src="<?php bloginfo( 'siteurl' ); ?>/wp-content/uploads/2011/10/logo.gif" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

    The final result should be:
    

    <div id="branding">
    <img src= etc...>
    </div><!-- #branding -->

    You should change all your static URLs in all php template files that contain them. You won't be able to add them in non-php files, such as .css files, etc.

17. ieatwork
    Member
    Posted 7 months ago #

    Excellent! I inserted the code into the branding div and it has worked.

    So I should now be able to use the featured images function on a page where I need a static image.

    I know the menu isn't quite right, as you pointed. The dropdown under exhibitors also doesn't seem to be centered properly.

18. ieatwork
    Member
    Posted 7 months ago #

    This is the CSS: http://pastebin.com/29hT72iD

    I have tried to play around with text-align: center on the menu attributes but can't seem to fix it.

    Thank you very much indeed for your help.

19. Marventus
    Member
    Posted 7 months ago #

    So I should now be able to use the featured images function on a page where I need a static image.

    Yep, that sould do it.
    Your submenu is absolutely positioned, which means their position is relative to the position of the last relatively positioned wrapping element, which in this case is .menu li. It would be hard to center the submenu exactly, because the width of your main menu items is set to auto by default and it will change according to the size of the text in the link tags.

20. ieatwork
    Member
    Posted 7 months ago #

    OK, I guess I will just leave the menu as it is if it going to be tricky to get it to align properly.

    I also have an issue with the homepage. I need to get the FESTIVAL and NEWS areas to be equal in width.

    The home page is set to the default theme template which features a twitter feed widget which I have renamed as the NEWS area.

    Do you have any idea how I can make both columns equal in width? I have been trying for days!

    I can't seem to find how to control the width of the widget container. Perhaps it is in sidebar.php code: http://pastebin.com/CwMMsu3Y

    Or in the widget CSS: http://pastebin.com/RZbVBaPj

    This is the suggested CSS for editing the style of the widget: http://pastebin.com/aXzHgpKW

    Please let me know if I can private message you. I feel I owe you for helping me out with all of these issues.

21. ieatwork
    Member
    Posted 7 months ago #

    FYI. I came up with a fix (sort of) for the dropdown menu.

    #access ul ul a {
    	font-family: 'KorolevBold', Arial, sans-serif;
    	font-size: 14px;
    	font-weight: normal;
    	background: #000;
    	color: #fff;
    	line-height: 1em;
    	margin: 0;
    	padding: .80em .0em .5em 0em;
    	min-width: 170px;
    	height: auto;
    	text-align: left;
    	padding-left: 13px;

22. Marventus
    Member
    Posted 7 months ago #

    Cool. That seems to work well.

    As for your columns, try the following lines of CSS:

    1. Remove left and right margins for #header, so only the bottom 28px one remains;
    2. Set the padding to 0 for #masthead and #footer;
    3. Set the padding to 35px for .two-column #container;
    4. Set the margins to 0 for #content-container, .content-sidebar #content, and .hentry;
    5. Remove left padding for .hentry .entry-title and .entry-content, .entry-summary;
    6. Float .content-sidebar #content to the left;
    7. Set the width to 100% for .widget-container;
    8. Set the width to 45% and display to block for .two-column #content and #primary; if you want to leave less space between both columns, simply increase the width of both divs slightly.

23. ieatwork
    Member
    Posted 7 months ago #

    Thank you. I will give that a try in the morning.

    The site is almost complete now :-) I just need to add a footer to the bottom of the pages which should be fairly straightforward.

    In order to get my Facebook and Twitter icons positioned under the menu would I need to create a new div container and float it next to the div which holds the logo image? See example of icons here: http://www.circus11.com/social.jpg

    I thought an easy way to achieve this would be to just add the icons to the logo image in Photoshop and then create an image map to turn the icons into links, but not sure this would be the correct/professional way to do it.

    Could I simply add a new div to the header.php to position the icons?

24. Marventus
    Member
    Posted 7 months ago #

    A good way of adding social icons is with an unordered list wrapped by a div.
    Something like this:
    

    <div class="social_container">
       <ul id="social_media">
          <li class="social_item">
             <a class="social_link twitter">
                <img src="path/to/twitter/icon" alt="Twitter" />
             </a>
          </li>
          <li class="social_item">
             <a class="social_link facebook">
                <img src="path/to/facebookr/icon" alt="Facebook" />
             </a>
          </li>
       </ul>
    </div> <!-- End #social_container

25. ieatwork
    Member
    Posted 6 months ago #

    Would it work if I inserted this into my header.php and changed the img src paths?

    I will give it a go and see what happens.

    I'll expect I'll need to position it correctly to the left of my branding div.

    Thanks,

    Ollie

26. Marventus
    Member
    Posted 6 months ago #

    Yes, you absolutely must change the src values to your own image values. Those were just an example.
    You can style this through CSS, which is why I added some classes and IDs for you to simplify things.

27. ieatwork
    Member
    Posted 6 months ago #

    Hi Marventus,

    It's me again with another question! :-)

    I wondered if you could help.

    I need to add Facebook and Twitter icons to the left of my JOIN THE CIRCUS button under the header image.

    See example of what I mean: http://www.circus11.com/social_links.jpg

    Here is a link to my header.php which is where I think this area of my site is controlled: http://pastebin.com/adiWBKRw

    Thanks in advance for any help you can give! :-)

28. ieatwork
    Member
    Posted 6 months ago #

    Is it as simple as putting the social media icons in <div class="button"> and floating them left?

29. Marventus
    Member
    Posted 6 months ago #

    Hi,

    The site is looking nice, :-)
    If you are going to use a hover effect similar to the Join the Circus button, then I would recommend not to insert the images as img tags, but rather set them as background images of your <a> elements.
    Also, the code for the button is, indeed, in header.php. Just look for this code inside the file:
    

    <div class="button"><a href="http://www.circus11.com/?page_id=85">JOIN THE CIRCUS</a>
    </div>

    Since your button is 27px high, I would make the icons 27x27px (or 32x32px max), so they align with the button.

    As for the code, try replacing the HTML code for the button with something like this. You should also add the following CSS code.
    The idea for these CSS styles is for you to merge them with the ones you already have there, always keeping the new version (mine) for conflicting or identical properties. Please notice that I changed the class name of the "Join the Circus" button from button to join-button, so you will have to change that in style.css too.

30. ieatwork
    Member
    Posted 6 months ago #

    That's extremely helpful. Thank you.

    I managed to get it to work using the code you supplied. However, the icons seems to be a little difficult to click on when hovering the cursor over them. Any ideas as to why this is happening?

    I changed the code slightly by using 'a href' in order to get the icons to link to the correct URLs:

    `<li class="social_item facebook">
    <a href="https://www.facebook.com/circus2011">Facebook</a>

    <li class="social_item twitter">
    <a href="http://www.twitter.com/circuseleven">Twitter</a>`

    Is this ok or is it bad practice?

    I also wanted to see what the icons looked like to the right hand side of the join-button. I tried changing all float values to 'right' in the CSS, but it did not have the desired effect.

    Thanks again for your help on this.

Reply »

You must log in to post.