Tagline via Text widget, revisited
-
On to the topic of how to implement a tagline in themes that don’t have that feature:
devblog described how to in this thread:
https://en.forums.wordpress.com/topic/add-tagline-to-rubricBut for the Rubric theme, I don’t see how to position the tagline into the header area.
Specifically, the technique devblog describes calls for setting position:relative on the ancestor element (of the text widget) that would cause text widget’s positioning to be relative to the overall page rather than the sidebar. For Rubric that’s div #raf. And that div contains divs #header, #content, #menu and #credit. Consequently, setting relative on #raf throws off positioning of existing header elements. (It actually does, I tried it.)
(Note: I did not leave my site in that disrupted state… so visiting it now will be un-illuminating.)
Am I missing something here? (Short of checking and revising all child elements’ positioning?)
— Graham
For reference:
In the text widget:
——————————
<div class=”mytagline”>
My test tagline
</div>
——————————In the css (make it conspicuous so I can find it):
——————————
.mytagline {
position:absolute;
top:100px;
left:100px;
color:#00FF00;
font-size:2em;
}
#rap {
position:relative;
}
——————— -
I don’t promise to do it tonight, but I’ll be checking it out. I’ll post something here as soon as I can.
-
Thanks devblog. I didn’t mean to obligate you at all… but if you enjoy extending the challenge that you investigated before, that’s good (plus I’ll clap if you do manage to hit on a solution :-). For my own purposes, worst case I can stick the tagline in the header image. It’s just rather unsatisfactory not to have a general solution, and it seems like quite a few people get lured by the admin settings panel into expecting a tagline, and then wondering how to live without it!
-
No problem.
I just saw the author’s CSS and I just don’t like it… But I’m not going to criticize his code. Give me some time. I’ll make some modifications and I’ll post them here later tonight.
-
-
This one was tricky. The way the original CSS was coded didn’t help at all (the author added a “position: absolute” attribute to the sidebar which hindered this approach of adding a tagline.
Because of the given circumstances, this is the best I could come up with:
#rap{ position: relative; overflow: hidden; clear: both; padding: 0; margin: -8px 0 0; } #header { width:100%; height:105px; position: relative; margin: -40px 0 0; padding: 20px; background:url('http://grahamwideman.files.wordpress.com/2009/01/header_clouds_012.jpg') no-repeat left top !important; } #header a { border-style:none; } #content{ float: left; margin: 50px 250px 0 0; position: relative; } #menu { position: relative; float: left; margin: -150px 0 0 -180px; } #menu h2 { line-height:1em; margin-bottom:.3em; margin-top:1em; } table.recentcommentsavatar { font-weight:normal; font-size:.8em; } #commentlist { font-size:.8em; } #commentlist li { border-top:thin solid #CCCCCC; } #content h1 { font-size:2em; font-style:bold; color:#666; margin-bottom:0; margin-top:0; } #content h2 { font-size:1.5em; font-style:bold; color:#666; margin-bottom:0; margin-top:0; } #content h3 { font-size:1.2em; font-style:bold; color:#666; margin-bottom:0; margin-top:0; } #content > h2 { font-size:1.5em; font-style:bold; margin-bottom:0; margin-top:0; color:#b0b0b0; } .storytitle a { font-size:1.5em; font-style:bold; margin-bottom:0; margin-top:0; } .mytagline { position:absolute; top: -80px; left: -470px; color:#00FF00; font-size:2em; } .credit { clear: both; }Just paste this whole thing in your CSS editor. There are some definitions I didn’t change but since I modified/added many attributes, I lost track of the changes.
Trying to modify/correct code that you don’t have access to by overriding some attributes is no fun.
FWIW, you might want to replicate this theme using Sandbox, and if in the process you need assistance, then I’ll be able to lend a hand in a more efficient way.
HTH
-
devblog — Determined to make this behave! Nice going!
> FWIW, you might want to replicate this theme using Sandbox, and if in the process you need assistance, then I’ll be able to lend a hand in a more efficient way.
I’m open to alternatives for sure. The main issue is — can Sandbox be revised (in CSS with reasonable effort and maintainable result) to flexible width?
Indeed, do you have an opinion on this question for WP’s themes in general?
-
By way of closure on efforts to insert a tagline via Text widget and CSS:
devblog’s valiant effort does position a tagline in the header area, and is possibly good enough for some purposes (and is potentially a useful technique elsewhere).
However, the tagline positioning is relative to the sidebar, which is on the right. Hence, when resizing the window, the tagline moves, possibly off the left edge of the window, and in any case not where one intended necessarily.
Given the overrides devblog was obliged to adopt to make this work, there’s risk of “introducing more opportunities for debugging” :-), and indeed IE6 gets thrown off by this level of innovation (though not by the tagline per se).
So… thanks to devblog — I greatly appreciate the effort. But now think that embedding the tagline in the image is a lower- maintenance approach… and I’m keeping an open mind as to the merits of other themes.
-
I use the Rubric theme for the simple reason I need a theme with a variable width, 2-column format. Of the only 9 themes available to WordPress.com users, only Rubric had the “style” which would fit my blog. But it takes programing far beyond my abilities to have a Tagline displayed. I don’t understand why WP theme developers do not just develop a “Rubric2” theme which allows Taglines. How difficult could it be??? Perhaps they could even clean up the code while they were at it.
James – The Newbie
- The topic ‘Tagline via Text widget, revisited’ is closed to new replies.
WordPress.com Forums 