Skeleton Child Theme Version 1.6
WordPress Version 3.4.2
Child Theme installed on main Multisite: public_html, wp-content, themes.
My CSS, PHP Coding skills = NOVICE
What I’ve done: Using the Theme Options, Extra Header Text menu I added four text links and a 10 icon (24x24px)social media icon bar in the upper right of the 960px header. I used p on the line with the four text links. These links are above the icon bar. I used img src with float left (5px) margin right padding to space the icons on one line. I did not add to or change style.scc or header.php or functions.php.
<p style="text-align: right"><a href="http://.......</a></p>
<img src="http://samplesite.com/wp-content/uploads/2012/11/treddit.png" style="float: left;margin-right: 5px">
I just cut and pasted the img src lines for all 10 icons. The icons are not linked to anything yet. I know there must be an elegant CSS way of styling the in-line list of icons, but I don’t know how to do it. I have no idea how to call functions, open or close hooks or filters — so if the solution involves these or similar coding skills so pease be gentle on me and explain in what file and in what part of the file the new code might go. The skeleton child theme functions.php file contains a lot of comments that explain how and when functions are called but I’m not certain what is enabled and what is not, or how to figure out what templates are used, if they are being used, when they are being used, where they are located or how to alter them. Yes, I know, taking a college level course in PHP would be helpful! 😛
Problem: When resizing or viewing on an iPhone, the four text links overlap just above the logo image (this looks okay) — but the icon bar slides to the left to OVERLAP the logo image. The icon images are on top of the logo image — this is NOT ok.
What I’d like to do: On normal 960px size I’d like the four text links and the icon bar to be top right justified, or centered, in line with the logo image. On resizing the grid I’d like the four text links to slide above the logo image and the icon bar to slide below the logo image. (Or they can both slide below the logo image as long as the text links are stacked above the icon bar).
What I’d like NOT to do: Add the four text links ABOVE the header in 960px, no (maybe… aligned right). Add the icon bar BELOW the header in 960px, no.
What I think might work: Somewhere in the function st_header_open() values there must be a way to section the header grid into two parts (instead of one large 960px space) so the logo image is on the left and the four text links and icon bar is on the right; when the page re-sizes the right half of the header slides under the left half. Or perhaps three parts, one on the left with the logo image and two on the right; the top one containing the four text links, and the bottom one containing the icon bar. Ideally, I’d like to know how to section the header however I wish and be able to control how each section stacks in iPhone view. A link to a general tutorial on this would be great I haven’t yet found one that a novice at my level can grasp.
Question: Is the above possible through the Theme Options, Extra Header Text edit window or do I need to change the child theme php file(s)? An explanation and step by step (especially where the new code would go, in what file and in what part of the file) for a NOVICE WP tinkerer would be most appreciated.
Any clue as to how change the background color of the above header space(s) would be most appreciated as well.
Thanks
