Sela theme customization

stacysjensen · Member · Jul 25, 2017 at 6:47 am
Copy link

Add topic to favorites
I have a few questions for the Sela theme.
I found a few answers in the forum, but a few have me still stumped.

I would like to change the color of the words in the menu bar for each page. I’m having trouble finding an example of how to change this. I also want to change the menu bar’s color.

To change the about page’s background color, what is the best way to do this.

I would also like to insert an image underneath the menu bar.. possibly the image would be underneath the bar when you click on the page. It would be under about when you hover, etc. I’m not sure how to do this in the css customizer.

I also wanted to sprinkle a few doodles around the page. I’m wondering if adding a background image would be the easiest option.

Is there a way to make a header in the Sela Theme responsive? I tried an example in the forum, but it ended up making the menu bar fixed and was hiding the beginning part of the copy on the page. (using safari and firefox browsers).
thanks.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 26, 2017 at 3:32 am
Copy link
Hi there,

I would like to change the color of the words in the menu bar for each page. I’m having trouble finding an example of how to change this. I also want to change the menu bar’s color.

To change the about page’s background color, what is the best way to do this.

What you need to do is to use the unique menu item id CSS class so that you can target styling to just that menu item. You can find that by using the web inspector built into your browser, or viewing and looking through the source code. For your about page menu item, this would be the CSS. You can edit the color code as desired.
```
#menu-item-158 a {
  color: #1abb00;
}
```
To change the about page’s background color, what is the best way to do this.

Is this what you are looking for?
```
.page-id-138 .content-wrapper {
  background-color: #1abb00;
}
```
What I have done is to pull the unique page id CSS class out of the opening body html tag on the about page and used that to specifically target the about page for the content area background color change.

I would also like to insert an image underneath the menu bar.. possibly the image would be underneath the bar when you click on the page. It would be under about when you hover, etc. I’m not sure how to do this in the css customizer.

The code to do this, and whether we will be able to is dependent on the image itself. Can you upload it to your media library and provide the URL of that image for the about page?

I also wanted to sprinkle a few doodles around the page. I’m wondering if adding a background image would be the easiest option.

Like with the above, it depends on the images and where you want to put them. We may be a bit limited on what we can do on this. A background image, will only show near the left and right borders (outside a vertical line on each end of your menu, and how much would be visible would depend on the width of someone’s window. An image could be added to the content area, but again, as screen width narrows on browsers or on tablets or phones, that image is going to shift and the doodles would likely end up getting covered, or interfering with the text on the page.
stacysjensen · Member · Jul 29, 2017 at 2:47 am
Copy link
Thank you. The image url for the chicken head question is: https://testsite1999.files.wordpress.com/2017/04/chickenhead_onlyl.png

Am I reading it correctly that I can’t add a custom font to the site? I wanted to change the font of the About on the menu bar to a custom font.
thesacredpath · Member · Jul 29, 2017 at 6:31 am
Copy link
You can change the font family, but it would have to be one of the fonts that are already set at Customize > Fonts, or it would have to be a font that is installed by default on all computers. We cannot add other fonts from outside of WordPress.com, and we can only set two custom fonts. This limitation does not apply to WordPress.com sites on the WordPress.com Business plan.

I do see a number of self-hosted sites associated with your username. Are you by chance talking about one of those?
thesacredpath · Member · Jul 29, 2017 at 6:40 am
Copy link
Hi, on the chicken head, the image is too large (or at least it appears that way to me), but you can add the following to the bottom of your custom CSS to see the basics.
```
@media screen and (min-width: 768px} {
#menu-item-158:hover a:after {
  content: url('https://testsite1999.files.wordpress.com/2017/04/chickenhead_onlyl.png');
  display: block;
  position: absolute;
  height: 100px;
  width: auto;
  z-index: 10;
  right: -140px
}
}
```
I’ve done this in a Media Query as it would interfere with the touch device menu that activates at 767px and narrower.
stacysjensen · Member · Jul 29, 2017 at 1:20 pm
Copy link
Thank you for your help. Yes. the font question is for this site. I typically work with self-hosted, but this has been a good experience. I will take a look at the chicken media query.
thesacredpath · Member · Jul 29, 2017 at 6:24 pm
Copy link
You are welcome, and let me know if you have any problems or questions.

No items found.