Center header & title Motif Theme

nelledurkee · Member · Oct 21, 2014 at 5:20 pm
Copy link

Add topic to favorites
Hi,

Total newbie at WP. I’m trying to decide what theme to use for my site and am testing out the Motif theme by customizing the CSS. I am wanting to center the header and the site title and have scoured the forums for any CSS written.. no such luck. Any help is appreciated!
thesacredpath · Member · Oct 21, 2014 at 10:23 pm
Copy link
Hi there, I’m seeing Pachyderm on the site under your username.

To center the title and site description (tagline) on Motif, you declare a text alignment of center for .site-title and .site-description like this.
```
.site-title, .site-description {
    text-align: center;
}
```
I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.
nelledurkee · Member · Oct 23, 2014 at 4:49 pm
Copy link
Thank you so much for your response, thesacredpath! That worked perfectly. As far as the “header” picture (above my site title/description), any quick code for centering that as well? I was messing around with it and looked under the web inspector on Safari but had trouble identifying the actual relevant CSS.
thesacredpath · Member · Oct 23, 2014 at 4:53 pm
Copy link
To help with centering the image, it would be very useful to actually see your site. Can you give us a link to it please?
nelledurkee · Member · Oct 23, 2014 at 5:01 pm
Copy link
Sure! It’s mykeytospeech.com.
thesacredpath · Member · Oct 23, 2014 at 5:06 pm
Copy link
Thanks a lot for the link. We can set a text-alignment of center on the parent element of .site-image and center the content (header image).
```
.site-image {
    text-align: center;
}
```
nelledurkee · Member · Oct 23, 2014 at 9:21 pm
Copy link
Thank you!! If I wanted to center the words/buttons across the menu bar or the navigation bar would the appropriate CSS be this?

.site-navigation {
text-align: center;
}

Don’t laugh, I tried!!
thesacredpath · Member · Oct 24, 2014 at 12:01 am
Copy link
No laughing from me. You are on the right track, so that is great. We have to do two things. Set .main-navigation to center alignment and then set the overall menu UL (unordered list) to display: inline-block. I’ve also adjusted the bottom padding on .main navigation since the inline-block setting inadvertently makes the height just a bit taller.
```
.main-navigation {
    text-align: center;
    padding-bottom: 5px;
}
.main-navigation ul {
    display: inline-block;
}
```
nelledurkee · Member · Oct 24, 2014 at 2:15 pm
Copy link
You are just phenomenal!! Thank you SO much for all your help :)
nelledurkee · Member · Oct 29, 2014 at 5:27 pm
Copy link
I have another CSS question. I want to use the “featured image” aspect of this theme on the front page; however, when I preview this page, the box where you can insert your own writing (perhaps the .entry-header?) is seriously huge and takes up a quarter of the picture. Is there anyway to scale that down or move it to another position (other than the bottom right hand corner) on the image?! Thanks! Here’s my sad attempt at the code :) One day I’ll get it right!!
```
.entry-header  {
       display: 75%;
}
```
thesacredpath · Member · Oct 29, 2014 at 11:05 pm
Copy link
Hi there, there is top and bottom padding on the title in that box, and top and bottom padding on the text below it, and also a footer area below the box on the right bottom of the image. Add the following and you can play with the padding settings.
```
.hero-container-inner .entry-header {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.hero-container-inner .entry-content {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
.hero-container-inner .entry-meta {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
```
trtoles · Member · Nov 12, 2014 at 12:28 pm
Copy link
Hi,

I came across this topic while trying to do the same things nelledurkee was trying. I am trying to get the header image centered, although I am trying to do it via a child theme.

When I added the following to the style.css in the child theme, it doesn’t have any effect.

.site-image {
text-align: center;
}

Can this not be done in a child theme, or am I (probably) missing something?

Many thanks,
Tim
designsimply · Member · Nov 12, 2014 at 1:09 pm
Copy link
When I added the following to the style.css in the child theme, it doesn’t have any effect.

That CSS example actually applies to the Pachyderm theme, not the Motif theme—which is a little hard to tell in the conversation above unless you look at nelledurkee’s site directly.

Since you are using a child theme, that means other code and/or CSS could have been modified so there is no way for someone to tell if your CSS is correct or what might be going wrong with it without looking at the site directly. I did test adding a header image to Motif and it centered automatically, so perhaps are you trying to center the site title or the site logo or something else? There are two ways I can try to help you, one is to see your site directly, the other is if you give me exact steps to set up my own site with something that’s not centered so I can make an example to work with. You should always post a link to an example if at all possible when asking for help with CSS! :)

One last note, your site is probably not setup here at WordPress.com because making your own child theme is not an options here. That is something you can do with a WordPress.org setup and not WordPress.com. Those things are different, the support is done in different places, and you can find out more about how they’re different at http://wordpress.org/support/ I can help you here with your Motif question if you provide enough details, but after that you should ask for help in the volunteer based WordPress.org forums since you are not setup here at WordPress.com.

No items found.