Page/Portfolio title positioning

kayleneheck · Member · Sep 16, 2015 at 3:50 pm
Copy link

Add topic to favorites
Is it possible with CSS to change the position of the title that appears on pages and portfolios on a “case by case” basis … changing both height and position of first letter (right or left)?

Thank you

The blog I need help with is: (visible only to logged in users)
jameswelbes · Member · Sep 16, 2015 at 8:33 pm
Copy link
“https://newopsf7101.wordpress.com/ is marked private by its owner. You can:
Request access to view the site. We’ll send your username to the site owner for their approval.
Log out and sign in as different user. You’re logged in as ‘jameswelbes’.
Learn about privacy settings.”

Can’t see your site.
timethief · Member · Sep 16, 2015 at 8:36 pm
Copy link
Volunteers cannot view private blogs and we Volunteers do not request access to them. Staff can view private blog content and this thread is tagged for their assistance.
thesacredpath · Member · Sep 17, 2015 at 6:19 am
Copy link
Hi @sklockwood, we can use the unique page id CSS classes set in the opening HTML body selector to target individual pages. first and last letters we can also do, but the best way to do those would be to enclose the first and/or last letter in span tags in the post/page editor and then include add a CSS class for those and call that class from the span tag.

If you give me a bit more of an idea what you are wanting, I can help out with the HTML and CSS.
wadanokk · Member · Sep 17, 2015 at 8:32 am
Copy link
Arimaha Bulshada
kayleneheck · Member · Sep 17, 2015 at 3:01 pm
Copy link
Thank you for you reply.

Sometimes the page title text on our “featured images” is not in a good spot and needs to be moved up, down, right or left. Here’s an example …
https://newopsf7101.wordpress.com/special-announcements/
There are other pages needing text realignment too.

It sounds like HTML manipulation is needed. I’d think that is something only WordPress developers can do.

Unfortunately, I can’t say that I fully understood your explanation. “Post/page editor” is new to me as well.

I did look at the HTML and CSS and didn’t see a way (that I understood) to accomplish what I’d like to do. I’ve dabbled with HTML but that was some time ago. Any help would be greatly appreciated.

Susan
thesacredpath · Member · Sep 17, 2015 at 7:46 pm
Copy link
Yeah, it can get a bit complex. After looking at the page you reference, I have something for you to try. The page titles have a slight grey text shadow on them. In the following CSS, I have darkened that a bit and also make the text itself fully white. Add the following to your custom CSS and then look at the pages that are a problem and see what you think.
```
#page-header {
    color: rgba(255, 255, 255, 1);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
```
We can use CSS and adjust the position of the titles on individual pages if that is what is going to be needed for your site. For visual consistency, for visitors, it is generally a good idea to keep the titles in the same location from page to page. Not a hard and fast rule though as sometimes when text is overlaid on an image, it requires some manipulation. Let me know how the above works, and if you find pages where it does not, give me links so that I can take a look at them.
kayleneheck · Member · Sep 18, 2015 at 9:22 pm
Copy link
Thank you. I incorporated that code and the text does look much better, but if there’s a way that I could also move text so that it’s not over images, that would be best. We have a few pages where we feel that is needed. I’d hope that if you can supply me one CSS code example, then hopefully I can figure out how to do the rest.

At https://newopsf7101.wordpress.com/special-announcements/ we’d want to move the centered text about halfway up to the top and over the mics.

We also may need to break, (or keep) text into two lines to avoid it appearing over an image as in …
https://newopsf7101.wordpress.com/marilyn-a-jackson-memorial-award/ For that page, we’d want to keep the two lines and move both to upper left.

So, if you would be kind enough to pick one of those pages to supply CSS, then I’ll see what I can do from there.

I’m sure you’re right when you indicate visual consistency is important, but we also feel it important that text is not over image, if at all possible.

I’m sure you have plenty of questions to answer already so if I “can be taught” then “all the better!”
thesacredpath · Member · Sep 19, 2015 at 1:00 am
Copy link
Hi, what we are going to have to do then is use the unique page id class and construct a CSS selector so that we can target specific pages. As an example on your Special Announcements page, if you view the source code and look in the opening body selector you will see page-id-521. We then use that (preceding it with a period ( . ) because it is a CSS class, and the this is what is needed to move the text up on that page and have it centered.
```
.page-id-521 #page-header .row {
    vertical-align: top;
}
```
For the Marilyn A. Jackson page, since you want the text on the left, we have to add another CSS rule to left align the text.
```
.page-id-517 #page-header .row {
    vertical-align: top;
}
.page-id-517 #page-header h1 {
    text-align: left;
}
```
This should get you going on things and allow you to make some more changes. It will be more difficult to move the text outside of the image area, but when you get to one of those, let me know and I’ll see what I can do.

No items found.