Make left sidebar semi-transparent in Twenty Fourteen

annediam · Member · Mar 15, 2014 at 4:49 pm
Copy link

Add topic to favorites
Hey guys,

I’m trying to make the left sidebar semi-transparent (using Twenty Fourteen) but none of the CSS I use works with this theme. Any ideas?

Also, ditto for removing the blog posts info, i.e. when you visit a blog post, I want to hide the line below the post title, containing date, author, etc.

Thanks a lot for your help :)

The blog I need help with is: (visible only to logged in users)
annediam · Member · Mar 15, 2014 at 5:34 pm
Copy link
Never mind for the blog post info (tag, author, date), silly me, I remembered

.entry-meta {
display: none;
}

working just fine.

Just need some help with semi-transparency for the left sidebar now ;)
Thanks!
designsimply · Member · Mar 16, 2014 at 8:52 pm
Copy link
So, with regard to transparency, you could make the left sidebar in the Twenty Fourteen theme transparent, but then it would be white and gray as an extension of the featured content and main content areas.

It seems more likely that you want the body background image to show through, so a workaround might just be to repeat a setting to make that same image the background for the left sidebar as well:
```
#main #secondary {
	background: url('http://iticonference.files.wordpress.com/2014/03/iti-background.jpg')
}
```
annediam · Member · Mar 17, 2014 at 8:41 am
Copy link
Hi there,

OMG that is an awesome idea – and it looks just perfect. Never thought of that!

Thanks a lot!
designsimply · Member · Mar 17, 2014 at 10:55 pm
Copy link
It looks awesome! Yay!
annediam · Member · Mar 18, 2014 at 8:36 am
Copy link
It does! You’re a wizard! :)
annediam · Member · Mar 18, 2014 at 2:24 pm
Copy link
By the way, another question: a visitor brought to my attention the fact that the blog is “over-hyphenized” when browsing on a Mac (Safari), i.e. that words are constantly cut (for example “Trans-
lation) but on a PC everyone says it’s not the case – and it’s fine on all 3 of my PCs (tested with Chrome and Firefox each time) Is there any way to correct this? Worse case, do you think that making the theme + the left sidebar wider will do the trick? (if yes, how? the CSS I used did not work either :p)

Thanks! :)
thesacredpath · Member · Mar 18, 2014 at 5:27 pm
Copy link
Give this a try and see how it works. I tested on Safari and Firefox on mac and it works.
```
.entry-content, .entry-summary, .page-content {
    word-wrap: normal;
    -moz-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
}
```
designsimply · Member · Mar 18, 2014 at 10:11 pm
Copy link
the blog is “over-hyphenized”

What funny feedback :) I guess people just really don’t like extra hyphens! Though, it was an intentional part of this theme’s design. Super interesting.
annediam · Member · Mar 18, 2014 at 10:18 pm
Copy link
Give this a try and see how it works. I tested on Safari and Firefox on mac and it works.

.entry-content, .entry-summary, .page-content {
word-wrap: normal;
-moz-hyphens: none;
-webkit-hyphens: none;
hyphens: none;
}

Thanks! I entered it and threw an email to the contact, she’ll check out when she has a chance – I’ll let you know!

What funny feedback :) I guess people just really don’t like extra hyphens! Though, it was an intentional part of this theme’s design. Super interesting.

Haha! well I work for the translation industry and translators are a particularly sensitive public for typography! :)
designsimply · Member · Mar 18, 2014 at 10:38 pm
Copy link
That makes more sense. :)
annediam · Member · Mar 19, 2014 at 9:05 am
Copy link
Hi guys,

Ok this worked wonders apparently (I have no Mac so I can’t check by myself)

.entry-content, .entry-summary, .page-content {
word-wrap: normal;
-moz-hyphens: none;
-webkit-hyphens: none;
hyphens: none;
}

But apparently it’s still hyphenized in the left sidebar (see for example the adress). Same CSS but with .sidebar-content instead of .entry?

Thanks!
thesacredpath · Member · Mar 19, 2014 at 5:19 pm
Copy link
Heh, some people just don’t like hyphens. I worked with a graphic designer that didn’t.

Change the selector string to this and it should take care of the sidebar stuff.

.entry-content, .entry-summary, .page-content, .widget
annediam · Member · Mar 20, 2014 at 9:28 am
Copy link
It seems to work – thanks a lot again for all the wonderful help! :)
thesacredpath · Member · Mar 20, 2014 at 1:57 pm
Copy link
You are welcome.
annediam · Member · Mar 23, 2014 at 1:19 pm
Copy link
Oh dear, sorry me again – two last questions before the “official” golive.

Client wants the “More Videos” to be removed after the 2 videos in the Ephemera widget in the Content sidebar…

And silly quetsion: how can I make a blog post sticky in this Theme, so that it always shows at the top of the “blog” page?

Thanks for everything!
Anne
thesacredpath · Member · Mar 24, 2014 at 4:55 pm
Copy link
Anne, add the following to get rid of the “more videos” link:
```
#widget_twentyfourteen_ephemera-2 .post-format-archive-link {
    display: none;
}
```
For setting a post to sticky, see this support page: http://en.support.wordpress.com/posts/post-visibility/#sticky-posts
annediam · Member · Mar 25, 2014 at 8:28 am
Copy link
Wonderful, you guys rock! Thank you so much!

No items found.