Help with Superhero Theme CSS coding
-
I need help with Superhero Theme.
I have upgraded to CSS stylesheets, but there is no option to change the font colors with this theme.
I would like to make changes to the following:Change the text color(s) in the Navigation menu , Theme Header, Widget Headers, and widget
text?
Change background color in widget box?
Increase image sizes in widget box?Also when I attempt to edit heading size in Post_the sizes do not reflect the changes. I have alot of trouble trying to keep a soft script Heading. Because, it knocks the format out of script to a plain text.
Is there a way to write or wrap text along the side of an image in a Post ?
Can I Remove the widgets from the home page only?
Is there a way to put customized social feeds in 1 widget; side by side.
Please view wipoutrech.wordpress.com
The blog I need help with is: (visible only to logged in users)
-
Hi there!
It seems you’ve got some pretty advanced CSS requests here, so I’m going to move this thread over to the CSS Customization forum.
There are quite a few CSS wizards there that will be able to take a look at your site and see if they can code some solutions for you. :)
Thanks!
-
In this forum, we can help you learn how to use the Custom Design tools and try to help you get started learning CSS. The best way to do it is to group the very like questions together and then add them in separate posts because it helps keep things organized and also makes it easier to search for answers by topic later. I’ll look through your questions here one by one, but in the future would you mind adding each topic in a separate request in the future?
https://en.forums.wordpress.com/forum/css-customization/#postformIn general, if you posted each question separately in this forum, or posted questions that will help you learn how to write CSS on your own, that would be the best way to do it!
Or, another option if you have a ton of design spec work you want to get completed and you don’t want to spend time learning CSS, you should consider hiring a consulting service:
http://en.support.wordpress.com/customize-my-site/request-theme-customization/ -
Change the text color(s) in the Navigation menu
To find what colors are used for navigation menus, right-click on one of the elements in a browser such as Chrome or Firefox and select the “Inspect Element” option. That will pull up a panel with the HTML of what you clicked on highlighted an all of the CSS that applies to that element on the right. Usually, you can see how the colors are setup pretty easily by clicking around in the HTML panel and then looking at what comes up in the CSS panel.
If you’d like to look at some tutorials on HTML and CSS, check these out!
http://www.htmldog.com/guides/htmlbeginner/
http://www.htmldog.com/guides/cssbeginner/To change the main menu navigation colors in the Superhero theme, start with this CSS example and adjust the colors as needed:
.main-navigation a { color: salmon; } .main-navigation ul ul { background-color: yellow; } .main-navigation li:hover > a { background-color: white; color: black; } -
Change the text color(s) Theme Header
To change the text color for the site title, the site title hover color and the site description in the Superhero theme, add this to your Appearance → Themes → Customize → CSS panel:
.site-title a { color: salmon; } .site-title a:hover { color: chartreuse; } .site-description { color: lightcoral; }Change the color names to color codes of your choice:
http://0to255.com/ -
Widget Headers and widget text?
The code inside widgets and the CSS that applies to different ones can vary. Here is a basic set of CSS that will cover most widget titles, widget text, and widget links in the Superhero theme:
.widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6 { color: blue; } .widget:hover .widget-title { color: green; } .widget * { color: #888; } .widget a:visited, .widget a { color: indigo; } .widget a:hover { color: dodgerblue; }Change the color name to a color code of your choice:
http://0to255.com/ -
-
Increase image sizes in widget box?
The images currently in the widgets at http://wipoutreach.wordpress.com/ are full-width. To give them more room, you would either need to expand the widget areas themselves or adjust the margin so content/images can fill up more of the available space in them at their current size.
Here is an example of getting rid of the left and right margins for widgets so to illustrate:
.widget { padding: 25px 0px; }Adjust the “0px” value to change the left and right margins.
Note that if you have inserted an image at a small size you may need to adjust the settings for the widget to make the image bigger. Or if the image itself is smaller than the widget allows, you might need to upload a larger image.
-
Also when I attempt to edit heading size in Post_the sizes do not reflect the changes. I have alot of trouble trying to keep a soft script Heading. Because, it knocks the format out of script to a plain text.
I would recommend changing heading sizes inside posts using CSS if you want them to be sized consistently. It’s likely the theme already has built in code for the image sizes of headings, so if you are adding HTML with heading tags that could be the reason why the finished look isn’t matching up to what you expect.
Could you please link to a post or page from your blog with a specific example to look at and include the heading text so forum volunteers know exactly what to look at?
-
Is there a way to write or wrap text along the side of an image in a Post ?
Do you mean left align the image? Check out the examples of image alignment in this help page:
-
Can I Remove the widgets from the home page only?
There is a way to target just one page at a time using CSS. To target the home page, for example, you would start all of your CSS selectors with “.home”
You might be able to do what you want with the widget visibility settings though. Check out this help page to learn more:
-
Is there a way to put customized social feeds in 1 widget; side by side.
Do you mean social media icons? I’ve noticed that other people have really liked the About.me widget for displaying social media icons/links. Check out this help page for more details if you’re interested:
http://en.support.wordpress.com/widgets/about-me/Or if you mean you want to display content from them, i.e. your latest Tweets from Twitter, then you would need to check for the support site at http://en.support.wordpress.com/ to see if the ones you want have widgets setup at WordPress.com. For example, the Twitter Timeline Widget can display a list of your latest Tweets:
http://en.support.wordpress.com/widgets/twitter-timeline-widget/ -
I am ever so grateful for all your help. I’m liking the moderations very much. Just a few more tweaks and it’ll be great.
I will take you advice to submit one question or topic at a time, and I will check out the links you sent me.
Also l like your suggestion to learn CSS coding, so is there a website or help page I can access to learn the codes from?
Thanks Again, I feel like I made the right theme choice for what I want to do now.
-
Also l like your suggestion to learn CSS coding, so is there a website or help page I can access to learn the codes from?
This is a great one to start with!
http://www.htmldog.com/guides/cssbeginner/
- The topic ‘Help with Superhero Theme CSS coding’ is closed to new replies.
WordPress.com Forums 