[SJBaily]

SJBaily

#8756

Can I simply put any CSS for styling the graphene-dynamic-widget-graphene_top_content action hook in the Graphene Theme Options/Display/Custom CSS styles box?

If so, can someone help me with the CSS for being able to make the top look nice at http://www.getintimatewithhistory.com/newsite2014? It’s not live yet. First, I used the slider with only one slide which was the About Me page, but she didn’t like that it said “About Me” on the top instead of Welcome. So I deactivated the slider and enable the action hook.

After that, I’m lost. I put in the author’s image and text into the widget, but played around with various border and margin styles, trying to control the appearance by putting code in the widget box, but that didn’t work.

Then I thought I’d try the Custom CSS styles box.

What I want is a small border around the author’s image, some space between the inline image and her text. I simply don’t know how to do that.

Thanks in advance for any help.

[Kenneth John Odle]

Kenneth John Odle

#42104

Quote:

Can I simply put any CSS for styling the graphene-dynamic-widget-graphene_top_content action hook in the Graphene Theme Options/Display/Custom CSS styles box?

Yes. If you are not using a child theme, this is the place to put it.

Quote:

trying to control the appearance by putting code in the widget box, but that didn’t work.

That will work if you use inline styles, otherwise, you can add the code to the custom css feature.

Have you installed Firebug for the Firefox browser? It makes sorting these kinds of issues extremely easy, and you can even test settings on the fly.

Quote:

What I want is a small border around the author’s image, some space between the inline image and her text. I simply don’t know how to do that.

How much css do you already know? You can use border and margin to achieve this.

[SJBaily]

SJBaily

#42105

I’m sorry, but I need a bit more help. I even read all this though it didn’t help: http://blog.kjodle.net/2011/11/04/graphene-action-hook-widgets-an-easy-way-to-modify-your-blog/

I went to the custom css feature and tried to style by using this:

#graphene-dynamic-widget-graphene_top_content (which I think is the correct ID for that hook) then I added .widget_text that I got from this forum, but then my padding and margin attempts didn’t seem to do anything.

If someone could correct my ID or the class of widget_text and then give me a rough CSS code to copy that would give a nice margin with the inner padding, I’d greatly appreciate it.

[SJBaily]

SJBaily

#42106

This got me a little further:

#graphene-dynamic-widget-graphene_top_content

{

display: inline;

margin-left: 10px;

margin-right: 10px;

}

But how do I style the text within the widget so it’s not smashed against the image. I thought it was “textwidget,” using Inspect element in Firefox, rather than my initial “widget_text” but I’m not sure how to do it.

[Kenneth John Odle]

Kenneth John Odle

#42107

Try using a cascading selector, like this:

#graphene-dynamic-widget-graphene_top_content img {

border: solid 6px blue;

margin-right: 10px;

}

[SJBaily]

SJBaily

#42108

Thanks, that was the help I needed to get me on the right track. I’ve used code in both the Display, custom code screen, and a little more in the widget itself.