Transforming the Twenty Twelve Theme to a Twenty Ten Theme

diaryofdennis · Member · Nov 13, 2015 at 7:18 pm
Copy link
I am talking about http://diaryofdennis.com/ now as I mentioned in my previous comments. The sandboxview blog is just my test blog where I tested CSS before I made the custom design purchase ;)

So, it’s about my main blog now.
thesacredpath · Member · Nov 13, 2015 at 7:39 pm
Copy link
Oops, sorry. I’m actually seeing the issue when logged into on that site also, and I’m actually seeing a few issues as I narrow my browser window such as these:
1. Menu hides partially behind header image when menu goes to two lines.
2. At about 900px, the top of the sidebar and content get very close to the header image and then at about 770px, they start to go behind the menu.
3. At 599px and narrower, the menu changes to the touch toggle button and the post title hides partially behind the button.

Let me work on some Media Queries to adjust things so the above doesn’t happen. I’ll post something for you in a while.
diaryofdennis · Member · Nov 13, 2015 at 7:45 pm
Copy link
Yep, exactly…. also this one…

4. First blogpost title is not clickable as the masthead area overlaps there.

I think what makes it complicated to change things is, that when logged out, WordAds is enabled and then the CSS code might have to be different again. It’s complicated :D
diaryofdennis · Member · Nov 15, 2015 at 5:44 am
Copy link
I starting to think the whole problem is also caused because the menu creates a second line when the window is reduced… I wondering why this menu creates a second line. I have no idea how to solve this.
thesacredpath · Member · Nov 16, 2015 at 5:51 pm
Copy link
Let’s give this a try. Change these three rules in your CSS to look like this.
```
.header-image {
    position: absolute;
    top: 20px;
}
.site-content {
    margin-left: 0.2rem;
    margin-top: 0;
}
.widget-area {
    margin-right: 0;
    margin-top: 0;
}
```
and then add these two at the very bottom of your CSS.
```
.site-header {
    position: relative;
}
#main.wrapper {
    margin-top: 120px;
}
```
See what you think with the above changes.

The menu has only so much horizontal space, and it will go to a second line when it runs out.
diaryofdennis · Member · Nov 16, 2015 at 7:14 pm
Copy link
Thanks for helping. I tried this and it would fix the problem with the post title… but it doesn’t stick the black menu under the header image. At a certain smaller resolution, the menu would still unstick from the header image.

Also the CSS changes still collide with the fact that I have WordAds enabled for non-wp-users, and disabled for logged in wp-users. I found out the top banner of WordAds does introduce a 960 fixed width to the Twenty Twelve theme, without the ads it’s responsive. Also there is space added above the header to show the ads, that means it’s basically not possible to make it look good for both, people who see the ads, and people who don’t, because absolute values will not work…. once I made it look good for users who see the ads, it looked bad for those who don’t… and the other way the same.

Your help is much appreciated, thanks a lot for trying to help me. But I went back to the Twenty Ten theme for now. I might try to customize the Twenty Eleven theme, since it has a responsive menu that really sticks below the header image no matter how small the resolution is…. so, the Twenty Eleven theme might be a better template for what I try to achieve.

I mark this thread as resolved… thanks again, much appreciated!
thesacredpath · Member · Nov 17, 2015 at 9:09 pm
Copy link
…but it doesn’t stick the black menu under the header image. At a certain smaller resolution, the menu would still unstick from the header image.

This is one of the things you run into when using position absolute and relative for moving element around in a responsive theme and especially one where the header image adjusts its width to the width of the screen/window. The same is the case for WordAds. Most of this can be fixed, but it would require a good number of media queries to adjust the position of all of the elements for various screen sizes.

I’m glad to have been of help, and you are welcome. If you have additional questions, please don’t hesitate to ask.

No items found.