Moving Sidebar / Editing CSS on Gallery Theme

One of my clients really wants the sidebar to be on the right side of the page rather than the left, and I think the Gallery theme is the best fit for his site.

I was able to change the font specifications using CSS, which works, but the header image I added isn't working, and the sidebar is still on the left when I want it on the right. Can someone tell me what's going on?

/*

Theme Name: Gallery Child
Theme Date: 20/12/2010
Version: 1.4.7
Theme URI: https://premium.wpmudev.org/
Description: A flexible gallery style theme for WordPress and BuddyPress using custom post types or a page template
Author: Tammie Lister - WPMU DEV - The WordPress Experts
Author URI: https://premium.wpmudev.org
License: GNU General Public License, v2 (or newer)
License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html

Tags: buddypress, one-column, four-columns, two-columns, fixed-width, custom-colors, custom-header, custom-background, custom-menu, theme-options, threaded-comments, translation-ready

Uses BP-Default theme files and styling for BuddyPress components with some customisation for theme.
Included in theme to allow for own child themes rather than being child of BP-Default

The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php

Template: gallery

*/

#header {
background: url("<?php bloginfo('stylesheet_directory'); ?>http://www.learningparis.com/wp-content/uploads/2012/11/learningparis1.jpg")
no-repeat bottom center; }
#headerimg {
margin: 7px 9px 0;
height: 350px;
width: 960px; }

#sidebar {
float: right;
text-align: left;
width: 200px; }

h1,h2,h3,h4,h5 {font-family: 'Felipa', cursive;}
p {font-family:serif;}

/* 65787-1348481511-ai */

  • Allison Lounes
    • Design Lord, Child of Thor

    Thanks for the quick reply, Timothy.

    OK, now I have:

    #header {
      background: url("<?php bloginfo('stylesheet_directory'); ?>http://www.learningparis.com/wp-content/uploads/2012/11/learningparis1.jpg")
      no-repeat bottom center; }
    #headerimg  {
      margin: 7px 9px 0;
      height: 350px;
      width: 960px; }
    
    #content {float: left; }
    #sidebar {float: right; }
    
    h1,h2,h3,h4,h5 {font-family: 'Felipa', cursive;}
    p {font-family:serif;}

    but the sidebar is still floating left. Nothing changed.

    I want the header to be a full-size image (the one I've inserted) but it's not showing up at all. The header is just the site title in regular text.

    I took the site off of maintenance mode incase you can take a look:

    http://www.learningparis.com

    Thanks!

  • Timothy
    • Chief Pigeon

    Hey again.

    Where was that inserted?

    I don't see it on your site.

    With CSS the way it works is Cascading so the last one called is the one which takes priority for example:

    .testclass{width:100px;}
    .testclass{width:200px;)

    In that code we have .testclass twice, this could be for anything, it's just an example.

    So if you had a table with the class .testclass then it's width would be 200px because that's the last one called within the CSS.

    Make sense?

    So I'm wondering if when you tested you didn't put the new code I suggested towards the end (or within a child)?

    A way to make it take priority is to use !important. So in the code for the theme I gave you:

    #content {float: left !important;}
    #sidebar {float: right !important;}

    This would force it to take priority but should be a last chance saloon type thing because then only the order would take affect in the future and could be troublesome to track it all down to see what, where, when and why. That's because if there are two instances using !important, the last one take precedence again.

    I just tested uploading a logo and all was good for me. I've uploaded screenshots to show. Is this where you uploaded your logo?

    Thanks.

  • Allison Lounes
    • Design Lord, Child of Thor

    OK, that fixed the sidebar problem. Thank you!

    For the header, it technically works, but it's a full size image, 960 wide by 350 tall. Even when I select the whole image, only a small corner shows up.

    Can I use the css to increase the container for the header image?

    Thanks again for your help.

  • Allison Lounes
    • Design Lord, Child of Thor

    OK, so I found this tutorial, which appears to be related to WPMU plugins:

    http://buddydress.com/2010/04/custom-header-tutorial-adding-an-image-and-changing-the-size/

    The tutorial says to look header_image_height and header_image_width in functions.php, so I did, and this is what I found:

    // Add support for custom headers.
    	/*add_theme_support( 'custom-header', array(
    		// The default header text color.
    		'default-text-color' => '000',
    		// The height and width of our custom header.
    		'width' => apply_filters( 'gallery_header_image_width', 1000 ),
    		'height' => apply_filters( 'gallery_header_image_height', 288 ),
    		// Support flexible heights.
    		'flex-height' => true,
    		// Random image rotation by default.
    		'random-default' => true,
    		// Callback for styling the header.
    		'wp-head-callback' => 'gallery_header_style',
    		// Callback for styling the header preview in the admin.
    		'admin-head-callback' => 'gallery_admin_header_style',
    		// Callback used to display the header preview in the admin.
    		'admin-preview-callback' => 'gallery_admin_header_image',

    So, it looks to me like the Gallery theme should allow images up to 288 tall by 1000px wide. I changed the 288 to 350, but nothing happened. CSS for image header hasn't changed from above.

  • Allison Lounes
    • Design Lord, Child of Thor

    Thanks Timothy.

    I did this and nothing happened. Then I went through all the CSS files and anything that said "header" to see if there were any other parameters that needed to be change. Everything that says "header" seems to allow for an image up to 1000px wide, so I can't understand why it's not working.

    Then, I tried to add the <img src=> directly into the header.php, and that didn't work either.

    This is really important to my client. Do I have to give up and start over with a new theme?

    Thanks for all your help.

  • johnzena
    • Design Lord, Child of Thor

    The above code to move the sidebar to the right did not work for me. I put it in the child themes style.css folder in the gallery-child_inc/css/child.css directory. Whether I used the !important or not didn't work in both instances. Please say where the code goes next time, You are assuming we know more than we do.

    Thanks
    John

  • Timothy
    • Chief Pigeon

    This is custom stuff, we don't officially cover this at WPMU DEV. Really you need to be hiring a developer for custom stuff.

    So when you ask for something custom where we go way above and beyond what is required of support then unless you specifically state how good or bad at CSS you are then we quite rightly assume you have the basics.

    If we just assumed everyone didn't know anything at all we would probably be writing essays on each and every thread which simply isn't efficient and would slow everyones support down. Sorry.

    I wonder if the CSS is bring included. You can check through something like Chrome Developer tools. There are some videos on that here:

    https://developers.google.com/chrome-developer-tools/docs/videos

    I suspect either you have another !important which is being called last or the CSS you placed is not being called.

    No links where provided so I couldn't check.

    I presume you activated the Child theme?

    May sound like a silly question, but it wouldn't be the first time :slight_smile:

    Take care.

  • johnzena
    • Design Lord, Child of Thor

    You are right but that's not what it said when I signed up. They said "expert help" so if I misinterpret what that means I am sorry. Anyway I changed over to the Network theme and was able to customize that to my liking by adding a widget area to the header. It now looks similar to this one but much easier to recode.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.