CSS magic needed for portfolio and blog title.

ivystoryblog · Member · Dec 17, 2015 at 10:23 am
Copy link

Add topic to favorites
I used to have two blogs. One of them is my science blog, the other is my personal blog. I decided to combine them together. So I put my personal stuff in my portfolio of my science blog (http://theotherscienceblog.com/portfolio-2/) so that it wouldn’t mess with the science brand, but still be there under my name if anyone wanted to read it.
Now, I’m wondering if there is a way to change the blog title via CSS when readers are in Heather’s Portfolio, but still keep the title: The Other Science Blog every where else.
Thank you so much for all your help!
– Heather

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 17, 2015 at 9:52 pm
Copy link
Hi, I’m getting a page not found on the page you referenced. I looked at your pages, and is it the one that starts with Sweet Rain?

If so, we can use the unique CSS page id class set in the opening body tag to target that page and change the title with the following.
```
.page-id-23128 .site-title a {
    visibility: hidden;
}
.page-id-23128 .site-title a:before {
    content: "Heather's Portfolio";
    visibility: visible;
    display: block;
    position: relative;
    top: 20px;
}
```
See what you think and let me know if it is a different page.
ivystoryblog · Member · Dec 18, 2015 at 12:00 am
Copy link
Whoops. I changed the link to make it look better. Sorry. http://theotherscienceblog.com/portfolio-page/

Thank you so much!

Let’s see if this CSS trickery works!
ivystoryblog · Member · Dec 18, 2015 at 12:05 am
Copy link
OMG! You’re a CSS wizard!

Is there a way to change the title with every portfolio post?

Thank you so much! I need to take CSS stylesheet classes so I can be a CSS ninja too.
thesacredpath · Member · Dec 18, 2015 at 4:27 am
Copy link
Super, glad that did the trick for you.

Is there a way to change the title with every portfolio post?

Yes we can do that. You can use the same procedure and just change the number in the code I gave you. You will need a separate pair of CSS rules for each individual portfolio post.

Let me know if you need help with that.
ivystoryblog · Member · Dec 18, 2015 at 10:57 am
Copy link
Wow, thanks.

OK. I think I used the right number for the portfolio post “Sweet Rain,” but it’s not changing the blog title.
ivystoryblog · Member · Dec 18, 2015 at 12:17 pm
Copy link
Can the portfolio archives be changed as well?
thesacredpath · Member · Dec 18, 2015 at 6:01 pm
Copy link
Sorry, we need to use postid on the single portfolio pages. This would be the code for sweet rain.
```
.postid-23184 .site-title a {
    visibility: hidden;
}
.postid-23184 .site-title a:before {
    content: "Heather's Portfolio";
    display: block;
    position: relative;
    top: 20px;
    visibility: visible;
}
```
You should be able to change the title on most pages on your site using either page id or postid, depending on what type of page. The author archive and date archive pages maybe not because I can’t see that they have anyway for us to differentiate the change from other archive pages. Category pages and tags pages we can do by using the unique category or tag CSS class.

Category something like this: .category-273
Tag like this: .tag-5936
ivystoryblog · Member · Dec 18, 2015 at 6:16 pm
Copy link
Oh. OK. I use different categories for the portfolio posts like “personal” or tags like “Heather”. Would that work?
ivystoryblog · Member · Dec 18, 2015 at 6:16 pm
Copy link
Thanks! It works! “Postid” was the magic word!
thesacredpath · Member · Dec 18, 2015 at 7:00 pm
Copy link
Absolutely that will work. Just look in the opening body HTML tag on the page you wish to work on with your web inspector (left pane) and find the right one. If you run into problems, just let me know.
ivystoryblog · Member · Dec 18, 2015 at 7:20 pm
Copy link
Are the project tags and types different from categories and post tags in terms of CSS?
ivystoryblog · Member · Dec 18, 2015 at 7:25 pm
Copy link
Thanks. It saves me from making a whole new blog for personal stuff!
ivystoryblog · Member · Dec 19, 2015 at 10:12 am
Copy link
The tag I choose (62845) isn’t working. I must not have the correct CSS for this.
kathrynwp · Staff · Dec 21, 2015 at 8:00 pm
Copy link
The tag I choose (62845) isn’t working. I must not have the correct CSS for this.

Hi Heather, I’m taking over for Richard this week – could you provide a link to the page you’re trying to target and I’ll have a look?
ivystoryblog · Member · Dec 21, 2015 at 9:38 pm
Copy link
I wish to change the blog title for the portfolio archives (http://theotherscienceblog.com/portfolio/) from “The Other Science Blog” to “Heather’s Portfolio.”

What I think I gathered from this discussion is that you can use a tag to do this. I’m not sure what kind of CSS I should use for this.

Thanks so much, Kathryn!
kathrynwp · Staff · Dec 21, 2015 at 9:56 pm
Copy link
Got it! The portfolio archive doesn’t have a post ID since it’s a special type of archive page and not a single post or page. This should do it:
```
.post-type-archive-jetpack-portfolio .site-title a {
     visibility: hidden;
}

.post-type-archive-jetpack-portfolio .site-title a::before {
     content: "Heather's Portfolio";
     display: block;
     position: relative;
     top: 20px;
     visibility: visible;
}
```
What you’ve done so far is fine, but I wanted to let you know that you could also combine CSS declarations to avoid so much repetition of code, by separating selectors with commas. For example, this would apply the same style to your portfolio archive as well as the posts with the ID 23184 and 23128 – and you can add as many more as you like. This would consolidate your code a bit by allowing you to remove the separate declarations you now have, but is completely optional.
```
.post-type-archive-jetpack-portfolio .site-title a, .postid-23184 .site-title a, .page-id-23128 .site-title a  {
     visibility: hidden;
}

.post-type-archive-jetpack-portfolio .site-title a::before, .page-id-23184 .site-title a::before, .page-id-23128 .site-title a::before {
   content: "Heather's Portfolio";
     display: block;
     position: relative;
     top: 20px;
     visibility: visible;
}
```
ivystoryblog · Member · Dec 22, 2015 at 1:32 am
Copy link
Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you!

I’ve looked everywhere on how to do this! I’ve always wanted to combine my science blog with my personal without messing with the brand of the science blog. This really helps people know where they are on the blog!
Thanks again, Heather
P.S. I’ll try consolidating my code. That seems more efficient than what I was doing!
kathrynwp · Staff · Dec 22, 2015 at 2:26 pm
Copy link
You’re very welcome!

No items found.