Feature Roulette and Header image in Inuit theme

wfossett · Member · Jul 27, 2011 at 12:30 am
Copy link

Add topic to favorites
I need to change the “multi-feature” stickies to a feature roulette.
I also need the text header to be a image… I have no clue how to code CSS.

please help.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 27, 2011 at 2:06 am
Copy link
When you say “feature roulette” are you saying you want it random or what? CSS cannot be used to add or change functionality. For that you would need access to the underlying theme files and know a good bit about PHP script, and we cannot edit themes here at wordpress.com.

http://en.support.wordpress.com/themes/editing-themes/

Is this the site you are talking about, http://geek-badge.com/ ? Since it is set to private I cannot look at it so what I’m going to provide below will be generic based on a completely “stock” theme.
```
#header {
background: url("URL of header img") no-repeat scroll 0 0 transparent;
}

#header .blog-title, #header .blog-description {
display: none;
}
```
The header area is 610px x 130px so your image will have to be that size or smaller. Upload the new header to the media library, get the URL of that image and then replace URL of header img between the double quote marks in the background declaration above.

The second bit of code above hides the existing title and tagline, but keeps it in the markup (XHTML) for the search engines to see, which is important.
wfossett · Member · Jul 27, 2011 at 2:21 am
Copy link
Ok. That worked. Only issue is that the image space isn’t 610 x 130. More like 610 x 50. is this something I’m doing wrong? or just the space I have to work with?
thesacredpath · Member · Jul 27, 2011 at 2:25 am
Copy link
Sorry, I didn’t notice the top and bottom padding they had set. Add the following to the #header selector I gave above.
```
height: 130px;
padding-bottom: 0;
padding-top: 0;
```
wfossett · Member · Jul 27, 2011 at 2:26 am
Copy link
Thanks
thesacredpath · Member · Jul 27, 2011 at 2:28 am
Copy link
You are welcome.
wfossett · Member · Jul 27, 2011 at 2:29 am
Copy link
Worked perfectly. About the Roulette. I meant a single featured post that cycles through the other posts. Like a slideshow almost. Instead of having seperate stickied features.
thesacredpath · Member · Jul 27, 2011 at 2:37 am
Copy link
Yeah, I thought that was what you were wanting, and that is not possible.
wfossett · Member · Jul 27, 2011 at 9:05 pm
Copy link
Any chance you know how I can have the image click-able and sends people to the home page?
wfossett · Member · Jul 27, 2011 at 11:49 pm
Copy link
Also, The header images for my articles are 594px width. I changed the Code you sent for a 594 width but it is aligned to the left. any way to get it over to the right?
thesacredpath · Member · Jul 27, 2011 at 11:55 pm
Copy link
That is a little complex. If Internet Explorer knew what “transparent” meant as a text color, it would be really simple, but it doesn’t.

What you have to do is create a transparent PNG image with no color at all the same size as the header image, upload it to the media library, put it into a text widget and link it to your home page, and then use CSS positioning to size and move that text widget up and over the top of the header image.
wfossett · Member · Jul 28, 2011 at 12:47 am
Copy link
what is the code to change the position. I solved the link to home issue.
thesacredpath · Member · Jul 28, 2011 at 1:13 am
Copy link
First off you have to set .container to position relative.
```
.container {
position: relative;
}
```
Next you put the text widget at the top of the sidebar and then you have to target that text widget by text widget ID which you will have to find from looking at the source code (view source) and it will be something like text-420707810

You then create a rule for that specific text widget as below. (all values for height, width, left and top as well as the ID# for the text widget are just placeholders and will need to be adjusted.
```
#text-420707810 {
position: absolute;
left: 0;
top: 0;
height: 130px;
width: 610px;
}
```
Again, this is all generic since I cannot see the site so I don’t know how close it will be.
wfossett · Member · Jul 29, 2011 at 11:50 pm
Copy link
I can’t figure this out for the life of me. Is there any way that I could get you to do it for me? :) I can give you permission to see the site.
timethief · Member · Jul 30, 2011 at 12:03 am
Copy link
If you want that kind of backend service then I suggest you contact Staff. http://en.support.wordpress.com/contact/
wfossett · Member · Aug 1, 2011 at 2:45 am
Copy link
How can I set a gap between the header and the first stickies feature?
thesacredpath · Member · Aug 1, 2011 at 3:42 am
Copy link
It’s really difficult for me to know exactly what is needed since I can’t see the site, but my suggestion would be in increase the bottom padding in #header which is on the original theme, 30px.
```
#header {
padding-bottom: 30px;
}
```
On the text widget relocation, I can’t really help without seeing the site.
thesacredpath · Member · Aug 1, 2011 at 3:44 am
Copy link
Actually if you add me under settings > privacy as a user I can then view your site. If you do that, and have the text widget in the sidebar (I recommend right at the top) I can help you with the repositioning.

No items found.