Transforming the Twenty Twelve Theme to a Twenty Ten Theme

  • Unknown's avatar
    diaryofdennis · Member ·

    I am happy with the Twenty Ten theme, except that the theme doesn’t show images of posts when browsing through tags or categories, but the Twenty Twelve theme does that. This is why I want to make the Twenty Twelve theme look similar to the Twenty Ten theme… I have some questions…

    1. How can I give the Twenty Twelve theme the following size specs of the Twenty Ten theme?

    Quick Specs (all measurements in pixels):

    Content and one sidebar: The main column width is 640 with one sidebar of 200.
    Full-width layout: The main column is 640.
    Header image is 940 in width and 198 in height.

    2. How can I make the Twenty Twelve menu look like the Twenty Ten theme?

    The menu should be below the header. The menu should have the background color black, font color white, and the tark grey hover background as the Twenty Ten theme.

    3. How can I decrease the distance between each menu link or menu entry?

    It would be great if one or two more links would fit into the menu, I basically want to prevent that the menu creates a second row. I believe this could be achieved on two ways, either reducing font size, or decreasing the spacing, how can this be done?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    chrisrudzki · Member ·

    the theme doesn’t show images of posts when browsing through tags or categories, but the Twenty Twelve theme does that.

    I’m afraid this is something that can’t really be addressed with CSS. If this is essential, I recommend choosing a different theme. You could try using Twenty Twelve, and customize it to your liking.

    Let me know what you think, as that’ll determine your next steps regarding the other changes you wish to make.

  • Unknown's avatar
    diaryofdennis · Member ·

    Yep, this is what I found out in another forum, and this is why I am ready to use the Twenty Twelve theme, but I want to apply CSS changes on the Twenty Twelve theme related to my questions, to make it look very similar to the Twenty Ten theme. So, I wonder if all my 3 points can be achieved…. if it’s possible, I would buy the CSS upgrade, I just don’t know how to achieve my three points.

  • Unknown's avatar
    chrisrudzki · Member ·

    I’m happy to help with your CSS :)

    1. You can reduce the space between menu items with a snippet like this:

    .main-navigation li {
    margin: 0 20px;
    margin: 0 1.43rem;
}

    That’ll cut the space between menu items in half.

    2. Restyling the menu. This will get you fairly close to a Twenty Ten style menu.

    /* adjust the menu's background color */
.nav-menu {
    background-color: #000;
}

/* adjust the menu items' link color */
.main-navigation li a {
    color: #fff;
}

/* adjust the menu item's link color when hovered */
.main-navigation li a:hover {
    color: #aaa;
}

/* adjust the dropdown menu's background color and margin */
.main-navigation li ul li {
    background-color: #333;
    margin: -1px 0;
}

/* adjust the properties of drop down menu items */
.main-navigation li ul li a {
    background-color: #333;
    color: #fff;
}

/* adjust the properties of drop down menu items when hovered */
.main-navigation li ul li a:hover {
    background-color: #333;
    color: #aaa;
}

    As for the layout specs, I’d recommend that you apply these changes first, and see what you think. Modifying a layout can be significantly more involved, and is more likely to break your site if it’s not perfect.

    I’d also encourage you to learn more about CSS. This guide offers a great start!
    https://en.support.wordpress.com/custom-design/css-basics/

  • Unknown's avatar
    diaryofdennis · Member ·

    Thank you! This is already a huge step! I added some other snippets that I found via Google and that should transform the theme to a Twenty Ten theme…

    1. Moving the menu below the header

    /* put menus below header */

.site-header {
    position: relative;
}

.header-image {
    position: absolute;
    top: 0;
}

.main-navigation {
    margin-top: 11.92%;
}

    2. Added menu background hover to the link hover

    /* adjust the menu item's link color and background when hovered */
.main-navigation li a:hover {
    color: #FFF;
		background: #333;
}

    My questiosn related to both points I mentioned

    1. Is change number 1 ok, or could this mess something up?

    2. To have the main navigation grey on hover too, I just added “background: #333;” to your “.main-navigation li a:hover” code. Is this the right way? Also I’d like to have the grey background hover box a little bit more expanded on the left and right… with my change the grey hover box is just as wide as the menu-link text. How can I improve on this and add a little more space on both sides?

    3. Probably my last question… I see that the title of the posts as same as the content area is more on the left than the header… as same as there is quite a lot of space between the content and the right widget area. In other words, I’d like to have the title and content stuff aligned more to the right, as in the example of the Twenty Ten theme… not sure how to do this, or if this would mess this up.

    With these changes I would be absolutely happy… also I think I should definitely learn CSS, thanks for pointing me to the link!

  • Unknown's avatar
    chrisrudzki · Member ·

    You’re very welcome :)

    The change in #1 should be fine, but if not, you can remove that fairly easy. Since you’re not modifying any of the selectors I’ve shared, you can just place your rules at the end. (So you can easily identify and remove them, if needed.)

    The change in #2 should be fine, too. As you mention, though, you’ll probably want some extra padding to the left and right of the menu text, so the hover background isn’t right up against the text.

    .main-navigation li a {
    padding: 0 10px;
    padding: 0 0.714285714rem;
}

    Keep in mind that the rules for “.main-navigation li a:hover” should be placed after the above rules for “.main-navigation li a”

    Usually, you’ll want more general rules to precede the more specific ones.

    As for #3, I’m not 100% sure I understand. Can you walk me through that again?

    Nice work on finding the CSS snippets you mention. Searching around is totally how almost everyone learns CSS. :)

  • Unknown's avatar
    diaryofdennis · Member ·

    Thanks, that works extremely well now! After adding the padding, I had to re-adjust the link margin too, but that’s fine now and looks very cool.

    About #3

    I inspected the element with firebug, and it seems the class is called “site-content” or “main”… I am not sure which one is right. But I am referring to the element that contains the blogpost title, the blogpost content and all the other stuff in that box.

    It’s strange now that I inspected it with firebug, the above mentioned element is definitely perfectly aligned on the left with the site-header or “masthead” element. However, when I am not using firebug, my eyes tell me that the blogpost title and the text content of the blogpost is too far to the left… in other words, I’d like to move “site-content” or “main” a few pixels to the right.

    Then there is the class “widget-area”… the space between the “widget-area” and the “site-content” is too much too, but I believe the problem would be fixed with what I mentioned above, if I just move the “site-content” or “main” some pixels to the right… maybe even the “widget-area” some pixels to the left too. This would reduce the white space in the middle, and it would also make the “header” element stand out more on the left.

    If needed I could take a screenshot to explain

    #4 Another idea I had yesterday, and I searched again to see if something is possible…

    I’d like to convert the Twenty Twelve theme to fixed width, I thought this might be difficult, because I would probably have to change all percent values to absolute values… but then I found a wp.com forum post about the 2011 theme that seemed much easier anyhow…

    https://en.forums.wordpress.com/topic/twenty-eleven-css?replies=16

    Since, I can not destroy something, I tested a snippet that I found there…

    #page {
clear: both;
max-width: none !important;
overflow: hidden;
padding: 0;
width: 690px !important;
}

#primary {overflow: hidden;}

.entry-content {width: 100%; clear: both; overflow: hidden;}

.alignright{float: right;}

.alignleft{float: left;}

    Funnily enough, this CSS code worked to convert the 2012 theme to fixed width, although the user who posted it, did post it in a thread related to the 2011 theme. Now I do wonder if the 2012 CSS code is very similar, or why this would work? I have no idea if this code would introduce any problems,… I also did change “width: 690px !important;” to the 2010 theme width “width: 940px !important!”, that worked too and made theme look like a 99% Twenty Ten remake (laugh).

    Can you confirm that the code could also be used for the Twenty Twelve theme together with the 940px width adjustment? Or is there any issue I am not aware of?

    To be honest, I would have no problem to use the WP mobile theme, instead of making the site responsive to all devices… if the mentioned code will not introduce any problems that I overlooked, I would definitely apply the code, because I prefer the 940px fixed width of the 2010 theme.

    If #3 can be done, I would definitely play with the options and then purchase the CSS upgrade to apply the adjustments to my main blog (I work on my test or sandbox blog imo)… #4 is luxury, but would be a nice-to-have, not a must-have :D

    Thanks again, I am close to what I want to achieve, you have been a great help, also you inspired me to try out CSS snippets, I should learn this too.

  • Unknown's avatar
    diaryofdennis · Member ·

    OK I believe I solved #3 with this code I put together… :D

    /* reduce site content white space on top and left  */

.site-content {
	margin-top: 1rem;
	margin-left: 1rem;
}

    Now maybe you can still give me a little input if #4 could cause any problems? Thanks in advance :)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, for #4, converting Twenty Twelve to fixed, give the following a try and test things out on your desktop, and in a tablet and phone and see if I missed anything. Make sure and check pages and posts as well. 

    .site {
	width: 68.5714rem;
}
@media screen and (max-width: 599px) {
	.site-content {
		float: left;
		width: 65.1042%;
	}
	.widget-area {
		float: right;
		width: 26.0417%;
	}
	.main-navigation {
		text-align: left;
	}
}

    I’ve also brought the menu and menu toggle button that appears below 600px in screen/window width to the left.

  • Unknown's avatar
    diaryofdennis · Member ·

    This is not working. This cuts the widget-area in half, also it will introduce a scrollbar on the rightside.

    Generally, I have much trouble to work with those “rem” values… I have absolutely no idea why sometimes pixel values are used, sometimes rem, and sometimes pixel and rem.

    I purchased the custom design upgrade yesterday, as I was sure the code I did put together would look pretty nice. But then I found out it would only look nice on my screen, once I decreased the window, everything would get broken, the menu together with the header, the margins I changed and so on.

    I made the changes go live yesterday on my main blog diaryofdennis.com, but for now I decided to re-enable the Twenty Ten theme, because my CSS code is broken anyhow.

    Here is what I came up with so far for the Twenty Twelve theme:

    /* put menus below header */
.main-navigation {
	position: relative;
	top: 102px;
}

.header-image {
	position: relative;
	top: -70px;
}

/* adjust the current menu item color */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: #FFF;
}

/* adjust the menu's background color */
.nav-menu {
	background-color: #000;
}

/* adjust spacing between menu entries */
.main-navigation li {
	margin: 0 20px;
	margin: 0 .43rem;
}

/* adjust menu height */
.main-navigation li a {
	line-height: 2.4rem;
}

/* adjust the menu items' link color */
.main-navigation li a {
	color: #FFF;
}

/* adjust the padding of the menu hover background */
.main-navigation li a {
	padding: 0 10px;
	padding: 0 .714285714rem;
}

/* adjust the menu item's link color and background when hovered */
.main-navigation li a:hover {
	color: #fffefe;
	background: #333;
}

/* adjust the dropdown menu's background color and margin */
.main-navigation li ul li {
	background-color: #333;
	margin: -1px 0;
}

/* adjust the properties of drop down menu items */
.main-navigation li ul li a {
	background-color: #333;
	color: #fff;
}

/* adjust the properties of drop down menu items when hovered */
.main-navigation li ul li a:hover {
	background-color: #333;
	color: #aaa;
}

/* adjust distance between articles */
.site-content article {
	margin-bottom: 2rem;
}

/* adjust site content margin  */
.site-content {
	margin-top: -3rem;
	margin-left: .2rem;
}

/* Reduce category tag white space  */
.archive-header {
	margin-bottom: 0;
}

/* adjust widget area margin  */
.widget-area {
	margin-top: -3rem;
	margin-right: 0;
}

/* reduce vertical widget white space */
.widget-area .widget {
	margin-bottom: 5px;
	margin-bottom: 1.1rem;
}
  • Unknown's avatar
    diaryofdennis · Member ·

    Oh sorry, I am already very confused… of course your code does work, the scrollbar is just the logical result with the fixed layout… ;D

    Anyway, I could imagine to use the responsive design, but there are problems in my code, that the header and menu gets broken with smaller resolutions. Also all the margins look great on my 1680×1050 resolution, but they become bugged when I decrease the window size… especially on tablet the margins are off. I have no idea how to sort both problems out.

    Also I use WordAds, so I had to change rem to pixel for main-navigation and header-image, because with rem the results would be different depending if WordAds is enabled or disabled… same for the site identity… the results would vary depending if the site title is enabled or not. With using pixel I did at least fix this problem, but then resizing the window is the new problem as said.

  • Unknown's avatar
    thesacredpath · Member ·

    Making a responsive theme into a fixed theme is sometimes tricky, and there are a lot of things that pop up, especially when you add in some other elements, such as WordAds

    On the header issue, due to the resizing of the image that takes place on narrower screens/windows, having the title/tagline in the image doesn’t work well, as you can see.

    Generally, we can probably overcome the header and menu breakage, if you wished to proceed. Let me know if you do and add in the code I gave and then we can work on the menu/header issues.

  • Unknown's avatar
    diaryofdennis · Member ·

    I am ok with it if the theme stays responsive. I’d like to proceed but as I have WordAds emabled for non-logged in users, and disabled for logged-in users, I am not if we can get it to work.

    The theme with my CSS is now active at my main blog.

    You just have to decrease the windows size and you see what happens to the black menu, to the header, and to the site-content and widget margins. If you can help me to fix this, I’d be very happy :)

    Thanks for offering help!

  • Unknown's avatar
    diaryofdennis · Member ·

    related to WordAds, I meant “I am not sure if we can get it to work”, the header and the menu together with WordAds.

  • Unknown's avatar
    diaryofdennis · Member ·

    Sorry to post again, but I noticed the “masthead” or “site-header” also overlaps with the blogpost title… if I click on the title, I click on the header. I’d like to have the title so close to the header, how can the invisible masthead area be decreased so that this bug is sorted out too?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, ads follow standard sizes as outlined in this Wikipedia article. Currently there aren’t any responsive ads. The ad will stay until they can’t anymore due to size or other page elements pushing them out and then they will disappear.

  • Unknown's avatar
    thesacredpath · Member ·

    It looks like you got the issue with the header/post title sorted out as I’m not seeing any issues on that in Safari, Chrome or Firefox now. If I’ve missed something, let me know.

  • Unknown's avatar
    diaryofdennis · Member ·

    All issues I mentioned are still there. The issues are not there if you are logged out (WordAds enabled), but the issues are there if you are logged in (WordAds disabled).

    Logged in:

    – Menu breaks and moves into the header… menu entries to move below the header if you resize… the whole menu is broken if you resize.

    – If you click on the first blogpost title, you click on the header, because the invisible masthead area overlaps with the sitecontent I think.

    – The margins I did set are broken, if you resize the site content and widget area move too close to the menu.

    Logged out:

    – There are not much issues logged out, except that the small smartphone menu button is moving into elements like the blogpost title.

    I still need help.

  • Unknown's avatar
    diaryofdennis · Member ·

    I see logged out the issue with the blogpost title overlapping with the heaer element appears too. But as said, the menu is ok when logged out and WordAds enabled.

  • Unknown's avatar
    thesacredpath · Member ·

    Ah, I can only see http://sandboxview.wordpress.com/ when logged in since it is set to Private. There is a logged-in CSS class set in the opening body selector, but not one set for not logged in. What you could do would be to precede the CSS for the adjustment on the spacing with .logged-in and then get that looking right, and then create another rule without the .logged-in class to control the spacing for visitors that aren’t logged in. I’m pretty sure that would work.

1 2
  • The topic ‘Transforming the Twenty Twelve Theme to a Twenty Ten Theme’ is closed to new replies.