WordPress.org

Ready to get started?Download WordPress

Forums

Sidebar won't respond to CSS (11 posts)

  1. Siancain
    Member
    Posted 5 months ago #

    I'm trying to add a sidebar to the right side of my home page because the theme I'm using only comes with two widget areas in the footer.

    I've registered the sidebar ('homepage') in functions.php, made sidebar-homepage.php and called it in index.php. It is appearing on the home page, but it is only appearing in the bottom left corner. It's also transparent with no background behind it. I want it to float to the right of the main content area and be roughly sized a third of the window.

    I feel like I tried everything I can think of changing in style.css. I've copied and pasted the widget CSS from the original theme into my child theme and edited it, but nothing has changed. I've floated the main content to the left (sidebar didn't shift, even with float: right). I've decreased the padding on the content to make room, but it just won't move! Can anyone suggest what I can do?

    Here is what I have in my child theme style.css:

    /*
    Theme Name: Notably Child Theme
    Theme URI: http://www.wearepixel8.com
    Description: Child theme for the Notably theme.
    Author: We Are Pixel8
    Author URI: http://www.wearepixel8.com
    Template: notably
    Version: 1.0.0
    */
    
    @import url(../notably/style.css);
    
    header[role=banner], .logo {
    	position: center;
    }
    header[role=banner] {
    	background-color: #fff;
    	padding-top: 1.25em;
    }
    
    #main .homepage {float: right; width:306px; margin-top:-84px;}
    
    a.more-link {
    	border: 1px solid #d9d9dc;
    	display: inline-block;
    	line-height: 3.33333333;
    	padding: 0 2.08333333em;
    	-webkit-border-radius: 4.16666667em;
    	border-radius: 4.16666667em;
    }
    
    .wrapper {
    	margin: -1;
    	position: relative;
    	max-width: 45.75em;
    }
    
    div[role=main], .secondary-content {
    	position: relative;
    }
    
    div .sidebar-homepage {
    	float: right;
    	width: 20.5%;
    	margin-top: 10px;
    	margin-left: -20%;
    	text-align: left; }
  2. Oizuled
    Member
    Posted 5 months ago #

    First, I think that there are a few problems with the CSS you are using. I don't know if these fixes will solve the issue you're talking about or not, but let's at least fix the easy stuff first.

    header[role=banner], .logo {
    	position: center;
    }

    position should be either static relative absolute fixed or inherit. center is not a valid value for position. If you're trying to center something horizontally try:

    header[role=banner], .logo {
    	margin-left:auto;
    	margin-right:auto;
    	display: block; /* or whatever width you want */
    }

    Check out http://www.w3.org/Style/Examples/007/center.en.html for more information on centering things.

    Then in your .wrapper, you need a unit after the -1.

    .wrapper {
    	margin: -1; /* px, em? */
    	position: relative;
    	max-width: 45.75em;
    }

    If you post a link to the site where you're having the issue I can try to take a look at what's happening on your site.

  3. Siancain
    Member
    Posted 5 months ago #

    Hi, thank you for replying! I'll fix that CSS now.
    My website is: http://www.outsidethedog.com The sidebar is in the bottom left corner on the homepage. Thanks for offering your help!

  4. Siancain
    Member
    Posted 5 months ago #

    Update: I've managed to get it to the right (yay!), but it isn't moving up to sit next to the content.
    Here is my CSS now:

    /*
    Theme Name: Notably Child Theme
    Theme URI: http://www.wearepixel8.com
    Description: Child theme for the Notably theme.
    Author: We Are Pixel8
    Author URI: http://www.wearepixel8.com
    Template: notably
    Version: 1.0.0
    */
    
    @import url(../notably/style.css);
    
    header[role=banner], .logo {
    	margin-left:auto;
    	margin-right:auto;
    	display: block;
    }
    
    header[role=banner] {
    	background-color: #fff;
    	padding-top: 1.25em;
    }
    
    #main .homepage {float: right; width:306px; margin-top:-84px;}
    
    .wrapper {
    	position: relative;
    	max-width: 45.75em;
    }
    
    div[role=main], .secondary-content {
    	position: relative;
    }
    
    .homepage-widgets {
    	background-color: #fff;
    	color: #696975;
    	font-family: 'Lato', sans-serif;
    	font-size: 0.875em;
    	line-height: 1.5;
    	margin-bottom: 3em;
    	position: relative;
    	margin: 0 auto;
    	max-width: 42.5em;
    	position: relative;
    	float: right;
    	width: 20.5%;
    	margin-top: 10px;
    	margin-left: -20%;
    	text-align: left;
    }
    .homepage-widgets h3 {
    	font: normal 700 0.857em/1.667 'Lato', sans-serif;
    	letter-spacing: 0.167em;
    	margin-bottom: 1.66666667em;
    	text-align: center;
    	text-transform: uppercase;
    }
    .homepage-widgets ul {
    	margin-left: 0;
    	list-style: none;
    }
    .homepage-widgets li {
    	border-bottom: 1px solid #dcdcd9;
    	padding: 1em 0;
    }
    .homepage-widgets li a {
    	display: inline-block;
    }
    .homepage-widgets ul ul {
    	list-style: circle;
    	margin: 0;
    	padding-left: 1.071em;
    }
    .homepage-widgets li li {
    	border-bottom: none;
    	border-top: 1px solid #dcdcd9;
    	margin-top: 1em;
    	padding-bottom: 0;
    }
  5. Siancain
    Member
    Posted 5 months ago #

    Can anyone help?? The only way I can get the main body and the sidebar to be next to each other is it to float: left; the whole wrapper, but that pushes the header and the main menu to the left too. How can I only float the text/background to the left and not the header, when they're both in the wrapper?

    Here is my website: http://www.outsidethedog.com

    Here is my CSS:

    /*
    Theme Name: Notably Child Theme
    Theme URI: http://www.wearepixel8.com
    Description: Child theme for the Notably theme.
    Author: We Are Pixel8
    Author URI: http://www.wearepixel8.com
    Template: notably
    Version: 1.0.0
    */
    
    @import url(../notably/style.css);
    
    header[role=banner], .logo {
    	position: relative;
    	text-align: center;
    	display: block;
    }
    
    #logo {
    	margin: 0 auto;
    	max-width: 100%;
    	text-align: center;
    }
    
    .archive-pagination {
    	margin: 0 auto;
    	max-width: 56.66666667em;
    }
    
    div[role=main] {
    	background-color: #fff;
    	padding: 0.938em 0.938em 0.313em;
    	margin-left: 1.5em;
    	margin-right: 1.5em;
    }
    
    .wrapper {
    	position: relative;
    	max-width: 53.75em;
    }
    
    .homepage-widgets {
    	background-color: #f2f2fc;
    	color: #696975;
    	font-family: 'Lato', sans-serif;
    	font-size: 0.875em;
    	line-height: 1.5;
    	margin-bottom: 3em;
    	position: relative;
    	float: right;
    	max-width: 24.5em;
    	position: relative;
    	width: 20.5%;
    	margin-top: 10px;
    	margin-left: 1.5em;
    	margin-right: 1.5em;
    	text-align: center;
    }
    .homepage-widgets h3 {
    	font: normal 700 0.857em/1.667 'Lato', sans-serif;
    	letter-spacing: 0.167em;
    	margin-bottom: 1.66666667em;
    	text-align: center;
    	text-transform: uppercase;
    }
    .homepage-widgets ul {
    	margin-left: 0;
    	list-style: none;
    }
    .homepage-widgets li {
    	border-bottom: 1px solid #dcdcd9;
    	padding: 1em 0;
    }
    .homepage-widgets li a {
    	display: inline-block;
    }
    .homepage-widgets ul ul {
    	list-style: circle;
    	margin: 0;
    	padding-left: 1.071em;
    }
    .homepage-widgets li li {
    	border-bottom: none;
    	border-top: 1px solid #dcdcd9;
    	margin-top: 1em;
    	padding-bottom: 0;
    }
  6. Oizuled
    Member
    Posted 5 months ago #

    Could you move the homepage-widgets section inside the wrapper div?
    So, instead of this:

    <div class="wrapper">
    <!-- search bar, main content, secondary-content, footer -->
    </div>
    <!-- other stuff -->
    <aside class="homepage-widgets">
    <!-- widget stuff that's down too far -->
    </aside>

    Try:

    <div class="wrapper">
    <!-- search bar, main content, secondary-content, footer -->
    <aside class="homepage-widgets">
    <!-- widget stuff that's down too far -->
    </aside>
    </div>
    <!-- other stuff -->
  7. Siancain
    Member
    Posted 5 months ago #

    What is the best way of going about that?

  8. Oizuled
    Member
    Posted 5 months ago #

    You would probably have to edit your theme, or create a child theme to move this section to where you want it.

    If you aren't sure how to create a child theme, read this article http://oizuled.com/using-wordpress-child-theme/, which should help get you started.

  9. Siancain
    Member
    Posted 5 months ago #

    I have a child theme already. I have my get_sidebar () in my page.php of my child theme. I just don't understand how to edit where it is on the page, because wherever I put it, it doesn't change where it appears.

    <?php
    
    get_sidebar('homepage');
    
    get_header(); // get the header template
    
    if ( have_posts() ) : while ( have_posts() ) : the_post(); // open and execute the loop
    
    	get_template_part( 'loop', 'page' ); // get the page template part
    
    endwhile; endif; // close the loop
    
    get_footer(); // get the footer template ?>
  10. Oizuled
    Member
    Posted 5 months ago #

    Actually, after looking at the theme your site is using, it appears to be a responsive theme - meaning it will shrink/expand/shift menus, etc. to look good no matter the size of the screen it is being viewed on.

    Positioning the box like you are trying to do might look OK on a desktop, but on a phone/tablet, the content is going to be rather tight.

    Could you add these widgets to the area where the tag cloud and comments are? It would avoid messing with the theme and honestly I think it would probably look a little cleaner.

  11. Siancain
    Member
    Posted 5 months ago #

    That widget area is too far down. I want people to find information on how to subscribe and follow the website on social media immediately, not by scrolling to the bottom.

    Is there no way of doing it?

Reply

You must log in to post.

About this Topic