Menu Background Color Change and Transparent Page Title area

rodwellsmith · Member · Oct 20, 2017 at 2:14 am
Copy link

Add topic to favorites
I am working with Sela theme and want to change Menu background color and make the white area with page Title transparent so the featured image is not blocked.

The blog I need help with is: (visible only to logged in users)
siobhyb · Member · Oct 20, 2017 at 6:59 am
Copy link
Hi @rodwellsmith,

You can use custom CSS to style the theme the way you want. To start with, the following CSS snippet will change the background of the title area to transparent:
```
.front-page-content-area .with-featured-image {
    background: transparent;
}
```
The following will then change the background colour of the main navigation to
```
.main-navigation {
    background-color: #663399;
    color: #fff;
}
```
You can change the value of #663399 to any hex colour code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of hex colour codes and their corresponding values. Here’s an example of a site that I’ve used before:

http://www.color-hex.com/

You can can also change the colour of the links in the menu from #fff (white) to another hex colour code.

See those little dots in between each of the menu items? You can also change the colour of those with the following:
```
.main-navigation .nav-menu>li>a:after, .main-navigation .menu>li>a:after {
    color: #663399;
}
```
As before, change #663399 with any colour code of your choice.

How do you add the above CSS to your site? That depends on where it’s hosted.

I’m not seeing any WordPress.com sites with the Sela theme active associated with your account.

Is the site you’re working with hosted outside of WordPress.com? If so, I recommend installing Jetpack then navigating to Appearance > Edit CSS</a. (Alternatively you can set up a child theme or activate a standalone CSS plugin.)

If your site is hosted elsewhere then the theme’s dedicated forum on WordPress.org is the best place to go for further help:

https://wordpress.org/support/theme/sela/

All threads on Sela’s dedicated WordPress.org forum receive a reply. By posting there you’ll help to minimise the confusion between the difference between the two types of WordPress (WordPress.com and WordPress.org). is a common and understandable point of confusion.

If you do plan to host your site here at WordPress.com, then you’ll need to upgrade to WordPress.com Premium or Business in order to add custom CSS.

Hope that information helps!
rodwellsmith · Member · Oct 20, 2017 at 7:24 pm
Copy link
Thank you so much for responding, Siobhyb.

I had started the https://wordpress.com/stats/insights/sela1533.wordpress.com site then decided to get some expertise by installing and running WordPress locally. So the site is http://127.0.0.1/wordpress/ on my PC. My question now is, how could I get my local files into https://wordpress.com/RodwellBuildingServices.wordpress.com or changing the Sela1533 to RodwellBuildingServices. Also could I register and host my domain likewise?
Thanks again,
Rodwell
siobhyb · Member · Oct 21, 2017 at 10:34 am
Copy link
Hi Rodwell,

You could follow the steps listed in the following guide to export the content from your localhost to WordPress.com:

https://transferto.wordpress.com/self-hosted-wordpress-org/

The above will help you to move any content (blog posts and pages) but you’ll need to manually activate Sela and set it up again on your WordPress.com site.

As for your domain: Yes, you can absolutely register a custom domain with WordPress.com. :) That can be done by selecting “Add Domain” via the Domains section of your dashboard here:

https://wordpress.com/domains/manage/sela1533.wordpress.com

You can also change the underlying site address from sela1533.wordpress.com to something else by following these steps:

https://en.support.wordpress.com/changing-blog-address/

Let me know if the above information helps out or if questions come up along the way.

No items found.