Move Title of My Blog

fabiolousstyle · Member · Jul 7, 2015 at 4:39 am
Copy link

Add topic to favorites
Can someone help me to move the name of my blog to the middle of the page? I would say right in the middle of my photo? As right now it’s on the top of the photo and its hard for people to read because of the colors. Thank you.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 7, 2015 at 5:19 am
Copy link
Hi, see what you think of this.
```
.site-branding.site-headerfix {
    margin-top: 20%;
}
```
You can adjust the value as desired. At 25% it is pretty much centered vertically, but then the cabinets make the right end hard to read.

Another option you many wish to consider is the following which adds a white text shadow to the title, making it readable anywhere on the image.
```
h1.site-title {
    text-shadow: 2px 2px 2px #fff;
}
```
fabiolousstyle · Member · Jul 7, 2015 at 12:04 pm
Copy link
Where do I put those codes? I’m new with wordpress so I have no idea what to do. Would you be able to do it for me? Thanks a lot!
thesacredpath · Member · Jul 7, 2015 at 10:42 pm
Copy link
Whoops, sorry, Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the custom CSS I gave. You can try the first, and then delete it and try the second and see which one you like better..
fabiolousstyle · Member · Jul 8, 2015 at 1:09 am
Copy link
Thank you so much for your help!
thesacredpath · Member · Jul 8, 2015 at 2:01 am
Copy link
You are welcome.
fabiolousstyle · Member · Jul 8, 2015 at 4:41 pm
Copy link
Hey there! would you happen to know how do i change the tag line of my blog to be only in one line? As right not its cropping in tow lines. Also do you know how do I add my contact info so people can contact me (EMAIL ADDRESS) and Instagram and stuff like that?

Thank you so much!
thesacredpath · Member · Jul 8, 2015 at 6:03 pm
Copy link
Hi, this will get your tagline on one line below the title.
```
.site-description {
    display: block;
}
```
For Social Media, you can add the Social Media Icons Widget to your footer widget area.
fabiolousstyle · Member · Jul 8, 2015 at 6:06 pm
Copy link
Where do I copy that code? Thank you!
thesacredpath · Member · Jul 8, 2015 at 6:08 pm
Copy link
Sorry, go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the custom CSS.
fabiolousstyle · Member · Jul 8, 2015 at 6:13 pm
Copy link
So this wont change the title of my blog also? I was trying to change only the tagline. Also is it possible the theme I have the title of my blog (fabiolous style) be in the very top of the page not under the main photo?

Thank you again!
thesacredpath · Member · Jul 8, 2015 at 9:57 pm
Copy link
No, the .site-description rule only affect the tagline/site description.

Given that LIbre is a responsive width theme designed to adjust to all screen/window widths, this is a bit of a challenge. Give the following a try and make sure and view your site on your phone. It looks good to me, but phones/mobile browsers vary as to how they render things.
```
.site {
    margin-top: 0;
    padding-top: 9em;
    position: relative;
}
.site-title {
    position: absolute;
    top: 0;
}
.site-description {
    position: absolute;
    top: 90px;
    display: block;
}
.site-header {
    position: initial;
}
```
fabiolousstyle · Member · Jul 8, 2015 at 10:59 pm
Copy link
Thank you so much! Last question. Is there anyway I could make the fonte a little bigger for my blog tittle? Thanks again!
thesacredpath · Member · Jul 8, 2015 at 11:04 pm
Copy link
Sure, after increasing it make sure and narrow and widen your browser window and check your site on tablet and phone to make sure that nothing is overlapping. Adjustments to some declarations may have to be made. It is 72px right now.
```
.wf-active .site-title {
    font-size: 72px;
}
```
fabiolousstyle · Member · Jul 9, 2015 at 3:34 am
Copy link
Hey there, I ended up not changing the size of my blog title. I just have another question. For the mobile version when you first go into my blog it looks fine but after you click on the button MENU the MENU button shows on top of my blog tittle so its kinda messy, not papering in the right place. Is there anything you could do to help me with that?

Thank you
thesacredpath · Member · Jul 9, 2015 at 4:58 am
Copy link
Hi, about all we can do is to adjust the site title size for smaller screens. The following is a Media Query, which allows us to say to the browser, “hey, on screens narrower than 400px, make the site title 40px instead of 45px. Give it a try and see what you think.
```
@media screen and (max-width: 400px) {
	.wf-active h1.site-title {
		font-size: 40px;
	}
}
```
fabiolousstyle · Member · Jul 9, 2015 at 5:13 am
Copy link
Where do I paste this? I deleted the stuff from CCS and my tittle and everything changed. I noticed on my mobile device after a click on the menu button then “about” for example the fonte for my blog tittle changes to bold and the menu button appears underneath. If you have an iphone you can do the test and see what Im saying.

Thank you so much
thesacredpath · Member · Jul 9, 2015 at 5:23 am
Copy link
Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the custom CSS I gave above.

No items found.