twenty twelve/Child theme code customization
-
Hello!
I’m creating my first wordpress website and I would like to make some changes to the twenty twelve theme. I created a Child theme and so far I have a header.php and style.css pages there.Here is my website: http://www.globalfreshamerica.com/ecommerce_gfa_w/
This is a sample of how I would like it to look: http://www.globalfreshamerica.com/images/SAMPLE.jpgI will appreciate if you can help me with the changes listed here:
1) How can I have an image next to the logo as the sample?
2) How can I have a custom menu that shows an image when I have the mouse on it as the sample? and How can I have it next to the logo not below?
3) How can I create a custom left menu with a design as the sample instead of the right menu that comes with the theme?My biggest problems are to make it look as the sample.
If you have any other suggestion to make it look like that let me know.Thank you!!!
-
1) How can I have an image next to the logo as the sample?
The easiest way to do this is to create a new transparent banner and put both the logo and image, each on a separate transparent layer.
This way you can precisely move all elements until you are happy.Save / export the image as PNG-format, so the transparent background is still there.
Upload the new image as your logo.
This can be done in most graphics software e.g. GIMP [free]3) How can I create a custom left menu with a design as the sample instead of the right menu that comes with the theme?
The theme TWENTYTWELVE supports only ONE menu.
It is best to find another theme that will support more menus.Themes like ‘custom community’, blackbird, and many many more themes will do what you want. Just create a second menu and add it to the right sidebar.
Thank you for replying.
About 1) how can I have that banner done? I don’t see the option for the banner anywhere in the options. Do I have to add a plugin?
About 3) I have tried many themes but they are not as customizable as I want. And because the design I want is simple I thought it was going to be not complicated to do 🙁 . If there is a way to modify how the side bar that is on the left side so I can make it look like the sample I will be able to use it.
Please let me know if you have any other idea to make it work.Thank you!
1. Just download the logo [right-click – save image as – ]store it on your PC.
- Open GIMP / graphics program and edit
new image- enter the required size e.g. 900 * 60px and a transparent background - add a new layer
- drag ‘n drop existing logo
- add a new layer
- drag ‘n drop new image
- move logo and image in the right place
- export..
- save as newbanner.png
- Find, install and activate appropriate theme
- In theme-options: set the link to te newbanner.png; you may need to upload it
- theme-options: setup the sidebars
- menus: setup two menus; one top, one in sidebar
- create a CHILDtheme and make all further changes to the childtheme
I figured it out in another simple way. With the same theme (twenty twelve) I only had to create a header image (as you said) with a different dimension and I uploaded it as the logo.
Now #1 is done. Now I need to figure out #2 and #3
Please let me know if you have any idea
Thank you
The theme TWENTYTWELVE supports only ONE menu.
It is best to find another theme that will support more menus.After that’s done you may consider tackling other issues.
Thank you. I will try that.
Thank you W.P. Ginfo
you can add a second menu to TWENTYTWELVE. go to Appearance, then select menus. There is a + sign next to main menu near the top of the page and call it custom menu. it should appear as an available widget. you can then add it to the main sidebar area for all pages except the home page, and to the first front page widget area. to move it to the left side of the page. For the main sidebar widget to move from right to left, use this bit of code in edit CSS (which is part of the jetpack)
/*– move sidebar to the left –*/
@media screen and (min-width: 600px) {
.site-content {
float: right;
}.widget-area {
float: left;
}
}/* for IE8 and IE7 —————-*/
.ie .site-content {
float: right;
}.ie .widget-area {
float: left;
}
Not sure how to move the first front page widget area, but I am sure it is something similar. As far as creating the block format for the menu, I would like to know how to do that also.Hope this helps
- Open GIMP / graphics program and edit
The topic ‘twenty twelve/Child theme code customization’ is closed to new replies.