ISOLA: Multiple Questions
-
I have several questions:
1. It is possible to place just my primary menu in the main navigation bar next to my blog name instead of in a hidden menu?
2. How do I decrease the font of my hidden menu only?
3. How do I increase the width of the text, allowing it to take up a bit more room? Or even the entire site to take up a little more space?
Thank you in advance for your help.
The blog I need help with is: (visible only to logged in users)
-
Hi there,
See below for answers with regards to customizing the Isola theme.
1. It is possible to place just my primary menu in the main navigation bar next to my blog name instead of in a hidden menu?
That’s going to be a bit tricky as the custom menu is now hidden behind a sliding panel. A better option may be to switch themes. The Suits theme matches Isola pretty well in terms of style:
http://theme.wordpress.com/themes/suits/
That theme incorporates a visible menu. Would that work?
Alternatively, you could pose the main navigation bar question in our CSS forum here:
https://en.forums.wordpress.com/forum/css-customization
We have some CSS ninjas that can tell you definitively whether that’s possible!
2. How do I decrease the font of my hidden menu only?
This CSS should do the trick:
div.menu-wrapper.nav-menu { font-size: 12px; }Just input that under Appearance -> Customize -> CSS.
3. How do I increase the width of the text, allowing it to take up a bit more room? Or even the entire site to take up a little more space?
Can you give this a try?
@media screen and (min-width: 600px) { .entry-content, .entry-summary, .entry-title, .entry-footer, .page-title, .site-header-inner, .comment-list, .comments-title, div#respond, .page-content, .paging-navigation, .post-navigation, .comment-navigation, .entry-format { width: 1000px; }Just change “1000” to whatever you would like.
-
Oh no! I thought this was the CSS support forum. Sorry about that.
Actually, I was seriously considering Suits before deciding against it, because I had issue with the line spacing and the lines under the links. But I suppose modifying that would be easier than modifying Isola the way I’m looking to do.
The last code actually didn’t work.
I really like Isola, but I’ll go with Suits if these issues can be helped.
-
Hi there,
The last bit of CSS is working on my side as shown here:
Can you let me know how you’re viewing the site when you add the CSS? Also, I changed the code a bit. Can you use this instead of the previous version?
@media screen and (min-width: 800px) { .entry-content, .entry-summary, .entry-title, .entry-footer, .page-title, .site-header-inner, .comment-list, .comments-title, div#respond, .page-content, .paging-navigation, .post-navigation, .comment-navigation, .entry-format { width: 1000px; }I just changed the min-width for this to become active to 800px. That means for screens smaller than 800px, this CSS will not be effective, which is desired as it messes with the mobile layout.
As for switching to Suits, changing the line spacing and link decoration will be easier than changing the sliding menu. The former two changes should actually be relatively easy. If you would like to switch, I’m happy to help you make the switches!
-
That’s awesome. That did work. There was a bit of extra in the first code, but once I deleted that, it worked. *face palm*
Problem, though: When I save it, it doesn’t stick. It reverts back to its regular format.
The more I look at ISOLA the more I’m like, LOVE. <3 <3 <3 <3
I might have to deal with the lack of a visible menu if I get any more stuck on this theme, though I would still like help with Suits should I change my mind. Do I need to change to that theme?
There is one more thing before we go to Suits. I was fiddling around with the font when this happened:
I’m dying to have that font. I think it’s the same as my header which is LTC Etica Display.
Oh and thank you so much for your help. :)
-
Hi Petra!
Answers below:
Problem, though: When I save it, it doesn’t stick. It reverts back to its regular format.
Sorry about that! This should save correctly:
@media only screen and (min-width: 800px) { .entry-content, .entry-summary, .entry-title, .entry-footer, .page-title, .site-header-inner, .comment-list, .comments-title, .page-content, .paging-navigation, .post-navigation, .comment-navigation, .entry-format { width: 1000px; } }I would still like help with Suits should I change my mind. Do I need to change to that theme?
Switching themes (or creating a separate test blog with the theme) helps when creating a new look or editing a theme. However, I can provide some CSS for that theme without you switching. Just let me know what you’re looking to do!
I was fiddling around with the font when this happened:
I'm dying to have that font. I think it's the same as my header which is LTC Etica Display.I’m not sure I understand what is being depicted in your screenshot. It just appears as though it’s matching your first post. Could you clarify a bit more?
As for the LTF Etica Display font, that isn’t available for body text (only for heading text). FF Basic Gothic looks close though. Would that work?
-
Okay, so, I’ve decided to change my theme to Suits because I felt bad putting you through so much to change Isola.
If you look at my theme now, you’ll see it. I have several things I need help with:
1. Line spacing. How do I increase it?
2. The full width option for my pages isn’t working properly because of the border I inserted and because I widened the page. Any ideas?
3. How do I get rid of the underlined links?
4. There has to be something I can do about the font, because honestly, they all just about suck. I’m looking for a taller, thinner font then what they have available. I remember being able to do it on one theme.
I hope that isn’t too much!
-
Not too much at all! See below:
Line spacing. How do I increase it?
This should do the trick:
.entry-content { line-height: 24px; }The full width option for my pages isn’t working properly because of the border I inserted and because I widened the page. Any ideas?
I wasn’t able to find a page set to the full-width page attribute after scanning a handful of pages. Could you point me to one so I can take a look? If you could just paste the URL of the page, that would help a ton!
How do I get rid of the underlined links?
This should remove the bottom border from links everywhere:
.entry-content a, .comment-content a, .page-content a, .entry-meta a, .widget-area a { border-bottom: none; }There has to be something I can do about the font, because honestly, they all just about suck. I’m looking for a taller, thinner font then what they have available. I remember being able to do it on one theme.
The only fonts to choose from are found here:
https://thinkwellinkwell.wordpress.com/wp-admin/customize.php#fonts
I’m a big fan of the Museo font family. Would any of those work for you?
-
Okay, all of that work and I did wind up changing it to Museo Slab. It’s the closest to what I’m looking for.
Here is the link to a full width page. You see how it doesn’t extend the way it should? The bar is a problem, but I think the bigger problem is the extended width of the page.
http://thinkwellinkwell.wordpress.com/a-turn-unexpected-ch2/
When I take off the width extension CSS, it looks like this:
When I take away the border too, then it’s finally perfect.
-
Oh, one more thing. All of my social icons won’t fit on the same line. Here is the code I’m using. Even when I make them super small they still don’t fit. What am I doing wrong?
-
Hi Petra,
Yes – the following bits of CSS are ruining the full-page width:
.site-main .content-area { max-width: 750px; width: 100%; } div#main:before { position: absolute; height: 99%; width: 1px; background-color: rgba(0,0,0,0.1); display: block; top: 4.6rem; left: 72%; }Let’s try changing this to something that is more specific to posts. How about replacing it with this?
.site-content .type-post { width: 750px; } .site-content .type-post:before { position: absolute; height: 99%; width: 1px; background-color: rgba(0,0,0,0.1); display: block; top: 4.6rem; left: 72%; }All of my social icons won’t fit on the same line. Here is the code I’m using. Even when I make them super small they still don’t fit. What am I doing wrong?
They’re appearing on the same line for me:
Were you able to get this resolved?
-
Okay, I tried it but it didn’t work, but it’s okay because I decided on a style for my blog and am now very happy with it. I just need help with two more things before I release you.
How do I put a border around my main navigation?
and…
No! I haven’t resolved it. Look at what happens when I add deviant art to my social icons:
Totally messed the whole thing up. This is the code I added:
One last thing: How do I add my own headers to my tweets and blog stats? I’ve seen people do it before so I hope I can do it as well.
Then, you can happily wipe your hands of me, lol.
-
Hi there,
Great! The site is looking awesome so far. You make me want to try out the Suits theme! See below:
How do I put a border around my main navigation?
Let’s start with this:
.wf-active .nav-menu li a { border: 1px solid #000; }Let me know if that’s what you’re looking for!
No! I haven’t resolved it. Look at what happens when I add deviant art to my social icons.
Ah! I see. Try replacing the current code you’re using in the Text Widget with the following:
<img src="http://thinkwellinkwell.files.wordpress.com/2014/07/black-woman-profile-pic-e1406518311746.png" alt="Black woman Profile pic" width="320" height="289" class="alignnone size-full wp-image-7983" /> <table> <tr> <td><div align="center"><a href="https://twitter.com/WrittinInStone"><img title="Twitter" src="http://thinkwellinkwell.files.wordpress.com/2014/07/twitter8.png" alt="Twitter" width="45" height="45" /></a></td> <td><a href="http://sawyerbrittanyblog.tumblr.com/"><img title="Tumblr" src="http://thinkwellinkwell.files.wordpress.com/2014/07/tumblr7.png" alt="Tumblr" width="45" height="45" /></a></td> <td><a href="https://www.facebook.com/writtininstone.net"><img title="Facebook" src="http://thinkwellinkwell.files.wordpress.com/2014/07/facebook7.png" alt="Facebook" width="45" height="45" /></a></td> <td><a href="http://www.pinterest.com/writtinenstone/"><img title="Pinterest" src="http://thinkwellinkwell.files.wordpress.com/2014/07/pinterest8.png" alt="Pinterest" width="45" height="45" /></a></td> <td><a href="http://writtininstone.deviantart.com/"><img title="Deviant Art" src="https://thinkwellinkwell.files.wordpress.com/2014/07/deviantart.png" alt="Deviant Art" width="45" height="45" /></a></td></tr></table>It’s the same content, but the code above is broken down into a table with table rows. Should look like this:
How do I add my own headers to my tweets and blog stats? I’ve seen people do it before so I hope I can do it as well.
I’m not sure if I fully understand what you’re referring to here. You can customize your message when the tweet of your post is sent out as shown here:
http://en.support.wordpress.com/publicize/#using-publicize
Perhaps you could point me to an example of this in action so I could take a look?
-
Thank you! That code for my social icons totally worked. It did add an extra line though, is there a code to get rid of it? I figured it was the table and tried to make the border equal “0” but that didn’t work.
GAH! I need to take a CSS class.
But okay. When I saw line around the menu, this is more of what I’m talking about:
Is there a way to do the borders like that in the sidebar too?
-
See below!
It did add an extra line though, is there a code to get rid of it?
Let’s edit that through HTML actually. Within the widget, add the following to each td tag:
style="border-color:white;"So, for example, they should read like this:
<td style="border-color:white;">You only need to add this to the opening tag for each td element.
Is there a way to do the borders like that in the sidebar too?
Ah – I see. How about trying this instead?
ul.nav-menu, div.nav-menu > ul {
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}The color of the border should match the border elsewhere on your site.
-
That’s great!
That’s exactly what I wanted.
If you tell me how to increase the line px of all the lines under the widget, the ones in the sidebar, I’ll be done. I just want it to match the rest of the blog.
-
This should do the trick:
.widget { border-bottom: 3px solid rgba(0, 0, 0, 0.1); }Let me know if it doesn’t work for some reason!
-
That’s absolutely right. That did it. I’m so sorry because I should have asked with this last one, but is there one for the lines after the blog posts? I guess I figured one code would do for all.
I tried to look at the inspect element feature on my computer to find it and couldn’t.
Is there a way to thicken that line as well to match?
-
Is there a way to thicken that line as well to match?
Of course there is! :)
.hentry { border-bottom: 3px solid rgba(0, 0, 0, 0.1); } -
That worked perfectly. Thank you so very much for your help sir.
You are awesome. You’ve released, lol.
- The topic ‘ISOLA: Multiple Questions’ is closed to new replies.
WordPress.com Forums 