Moving widgets in footer of Twenty-thirteen theme
-
Hi there,
I’ve decided to overhaul my blog and have started to implement CSS changes to the Twenty-thirteen theme, but I’ve stumbled across a few problems that I can’t seem to unpick.
I have set up widgets for twitter, subscribe, a follow me section (that includes buttons for twitter, linkedin, flickr & instagram), recent posts and archives. In the widget designer I put the widgets in the order I want to see them on my blog (the order outlined above), but although my twitter feed and subscribe widgets show as I want them to on my site, the rest get pushed along in the incorrect order.
Ideally, what I’d like to see is the follow me section (with my social media buttons) displayed below the subscribe section. Then to the right of this (as you look at the screen), I’d like to see recent posts section, and beneath that my archives section.
I’ve trawled through the page info and inspected the element but I can’t readily see how to do this :( Does anyone have any ideas?
I’ve also tried to get rid of the black box behind my footer, using
.site-footer .widget-area {
background: transparent;but it doesn’t seem to work.
Any help on any of these issues would be greatly appreciated!
Thanks :)
The blog I need help with is: (visible only to logged in users)
-
The selector .site-footer .widget-area targets an area that’s inside the footer, and that area is already transparent. To remove the blackish bg you need this:
.site-footer .sidebar-container { background-color: transparent; }The widget area used the masonry layout. I don’t think you can make it display the widgets the way you want them. Better switch to a theme with four footer widget areas.
-
Thanks for the quick response justpi! I’ve tried the code you gave me, but i’m still getting the black in the widget area :(.
I’ve also noticed that, even though all the changes I’ve made to my CSS show up when I’m in the custom design page, when I preview them on my live site, all the changes I’ve made in footer area do not show up, although changes I’ve made to the rest of the page do! I’ve cleared my cache, tried viewing my live site through web browsers other than Chrome, but still get the same thing; none of the changes i’ve made to the footer area show up on the live site (despite working perfectly in the custom editing page). I can’t see any glaring mistakes in my CSS; no missing brackets or semi colons. And it’s just the footer I’m having problems with. I’m so confused!
Here’s the code I’m working with, that’s working fine in the editor but not showing up on my live site:
.site-footer {
background-color: #b2dedc!important;
text-align: left;
color: #494949;
font-size: 10px;
}.site-footer .sidebar-container {
background-color: transparent;
}.site-footer a {
color: #494949;
text-decoration: none!important;
}.site-footer a:hover {
color: #dc3c6b!important;}
.site-footer .widget-area {
margin: 0 auto;
max-width: 1040px;
width: 100%;
background-color: #d6eeec!important;
}.site-footer .widget-title, .site-footer .widget-title a, .site-footer .wp-caption-text {
color: #1f49ac;
}.site-footer .widget {
color: #494949;
}.site-footer .widget a {
color: #e6402a;
text-decoration: none;
}.widget a:hover {
color: #dc3c6b!important;
}If you can shed any light on this, I’d really appreciate it, as I’m tearing my hair out over here!
Thanks for the advice about displaying the widgets. I’ll have a re-think about how I can address this.
-
You’re welcome.
The code I suggested is correct: obviously it’s not working because of the rest of what you are reporting.
I switched to 2013 in one of my blogs and added the CSS you pasted above: it worked fine, so this has nothing to do with the theme. (I mean that the changes showed live: I do have the upgrade on that blog).
Also, I checked the CSS of your blog: none of the above code has been added to your blog.
What browser and version are you using? Can you try adding the CSS in a different browser?
-
I had noticed that all the footer related code had not been saved in my CSS after I emailed you, but I have now reinstalled it (although having just checked my version of Chrome – which is version 27.0 2013 – and relaunching the browser, I found that all the footer CSS was missing again!). So I’ve put it back in again, but it’s still not showing any of my changes, even though I can see them in the design view. I’ve tried looking at in a different browser but the same thing happens.
What do you mean when you say you switched to 2013? Do you mean you switched to Chrome 2013? Because thats the browser i’m using and I cannot see my changes on my site, but only for the footer. The rest of the changes I’ve made are all visible on the live site.
I have no idea what I’m doing wrong. I’ve spent all day trying to sort this out and I really have no idea why I can’t get it to work. I’m at my wits end :( :( :(
-
Note that you can upgrade any browser version or download another browser here > http://browsehappy.com
Hope this helps. -
thanks for the advice thisimethisspace. I have got the most uptodate version of Chrome, but I still can see my CSS changes – for my footer – applied on my live site :(
-
-
a) I mean I switched to the theme Twenty Thirteen (to make sure there’s nothing wrong with it).
b) Chrome has some issues: try Firefox or Safari if possible. If you get the same results, then at least we will have eliminated one possible cause.
c) The only other thing I can think of at the moment is try using the old CSS editor. Go to your dashboard and press enter after you change the URL in the address bar from this:
…………..wp-admin/WHATEVER
to this:
…………..wp-admin/themes.php?page=editcss -
Thanks for the suggestions guys. I’ve tried IE this morning and the code does seem to be working, and it seems to be showing in Chrome now too, which is great news! So it seems that bug is dealt with at least :)
But I’m still finding that even though I save after each change in the design editor, and I get confirmation that the changes have been saved and published, when I log off and then log on again all the footer code is missing from the design editor. The CSS always seems to revert back to when I had only 41 lines of code. Surely there is no limit to the amount of CSS alterations you can make in the editor; there never was using the old editor. As you can imagine, making all these changes, saving them, and then finding that they arent there when I log back on again is very infuriating! Any ideas why this is happening, or whether there is a way I can combat this?
Also found I’m having trouble changing the hover color on my site title. I’ve used the following code (which works fine on the hover element of other links in the blog), but it doesn’t want to work on the site title:
.site-title {
color: #494949;
font-size: 100px;
font-weight: bold;
text-decoration: none!important;
}.site-title a:hover {
color: #dc3c6b!important;
}Not sure why its not working here; perhaps I have the .site-title element wrong?
-
I don’t have any other ideas. What I know is that the new CSS editor is still under development, but I can’t be sure if this is related to this strange issue or not. As I said, try using the old CSS editor so we can see if this makes a difference:
YOUR_BLOG_URL/wp-admin/themes.php?page=editcss
You can bookmark this dashboard screen so you won’t have to enter the URL each time.As for the hover color, you got the .site-title right: it’s the “a” part of it that’s wrong. The header link isn’t just the title, it’s the area that encloses title plus tagline; so to target only the title you need to lose the “a”:
.site-title:hover { color: #dc3c6b; } -
It’s weird huh? I haven’t been brave enough to log off this morning yet, but I have bookmarked the old dashboard screen as you’ve suggested, just in case the code disappears again! Fingers crossed!
And you’re right about the .site-title element; I just noticed the ‘a’ myself before you replied. What a rookie mistake :)
This morning my updated site is looking much better than it was when I left it last night – what an infuriating day! Thank you so much for your help, you’ve been great! :D
-
You’re welcome!
I’m seeing that designsimply (the WP staff member responsible for helping with CSS) is back, so she’ll probably look into this sooner or later. -
Hello! Apologies for not seeing this thread sooner. This part of cuplet’s description where she describes her CSS saves not staying put should definitely not be happening.
But I’m still finding that even though I save after each change in the design editor, and I get confirmation that the changes have been saved and published, when I log off and then log on again all the footer code is missing from the design editor.
I did test on my own test blog, and saving CSS is working for me there. So I wonder if it’s an issue with the blog settings for the cup-let.com blog.
A few updates have been made to the CSS editor recently though. @cuplet, can you confirm whether you’re still seeing this problem happen when you try to save CSS changes using the Appearance → Themes → Customize → CSS editor?
-
I’m going to mark this thread as resolved since there haven’t been any further replies in the last few weeks and because I tested and was unable to reproduce the problem. If you come back and need further help, please reply here and mark the topic as “not resolved.”
-
Hi designsimply. Sorry for not replying sooner; I’m not sure where the time has gone!
I’ve tested the issue a few times on my site since my original report, but it all seems to be working fine now :). Thanks for following up though! :)
-
Great! Thanks so much for following up with a note about it! (I like knowing when something gets resolved.) :)
-
I can not get the footer widget showing. How do I get it back on again? There isn’t a widget for the footer so where was it and where did it go?
-
Hi @oavs, the site linked to your username is a self-hosted WordPress installation. I see three WordPress.com sites connected to your username, but they do not look like they are being used.
Can you provide the URL (address) of the site you are asking about?
In general, widgets can get moved out of sidebars and footers when you switch themes. I would suggest taking a look in the “Inactive Widgets” area near the bottom of Appearance > Widgets and see if the widget is there. If so, drag it back into the footer widget area.
-
HI , Thank you thesacredpath.
before you check out the link same problem when I have created a child of Twenty Thirteen theme for other existing sites and same results. No (wide dark ) footer with default links are showing .
Here is the link,
http://www.shoppingwebsites.com.au/
and
http://www.travelbookkeeper.com.au/
- The topic ‘Moving widgets in footer of Twenty-thirteen theme’ is closed to new replies.
WordPress.com Forums 