Curator theme CSS

mynths · Member · Nov 9, 2015 at 12:41 pm
Copy link

Add topic to favorites
Not sure if all of these question are CSS, but I see that it takes a long time getting a respond on the curator theme (people have posted and no one has replied although it’s more than month ago).

I would really like to change the dropdown menu that says “OPPSKRIFTSARKIV” – its grey and dark grey – I would like it just plain white (the whole background, or without boxes), or light grey and white.

In my theme I can choose 1 2 or 3 columns + the sidebar. I want 1 column on the front page, altough I would really like 2 or 3 columns on the OPPSKRIFTSARKIV page, so you can se more than one recipe at a time.

Is there a CSS that can help me get rid of the grey boxes in my main menu and the boxes around the recent comments?

I also want to get rid of the date on each post showed on the front page…

Hope you can help!

The blog I need help with is: (visible only to logged in users)
mynths · Member · Nov 9, 2015 at 10:45 pm
Copy link
I would also like the top white box or header to be 500 pixels (same width as the theme) and not full width, as this blog https://munichpreschool.wordpress.com/our-team/
thesacredpath · Member · Nov 12, 2015 at 6:57 am
Copy link
Hi @mynths, and sorry about the issue in the Curator Theme forum. We are looking into what happened on that and will get that corrected.

On the submenu, add the following CSS and you can adjust the colors as desired. I’ve put a very light grey on the background color for the inner section, but you can change that to #fff (white) if you wish, and the color declaration is for the text color of the sub menu items.
```
.primary-menu .sub-menu, .primary-menu .children {
    background-color: #fff;
}
.primary-menu .sub-menu a, .primary-menu .children a {
    background-color: #f1f1f1;
    color: #000;
}
```
On the column issue, it looks like we can get a single column on the main page. It works well with standard post formats, but It may take some work to get image, quote and link post formats to display correctly. I don’t see any of those on your site right now, so it may be a non-issue. If you plan on using any of those post formats, let me know and I can see what I can do to get those sorted out (they just come in way too narrow. Here would be the CSS to keep the home page at 1 column no matter the setting in the customizer.
```
.home .layout_2_col_sidebar .post, .home .layout_3_col .post {
    margin: 0 0 1.429em;
    width: 100%;
}
```
Make sure and check all pages and click around on categories and such to make sure nothing else has gone awry. I don’t think it will, but it is always good to check.

On the menu, are you talking about the lines on either side of the menu items on the top level of the menu? If so, we can remove those with the following CSS.
```
.primary-menu > li:first-child > a, .primary-menu > li > a {
    border-color: rgba(0, 0, 0, 0);
}
```
Let me know how things go.
mynths · Member · Nov 12, 2015 at 11:15 am
Copy link
Thank you so much for the help :)

first code worked out good :)

I tried code nr 2, altough when I chose the 2 column and sidebar option for the theme, the front also went 2 columns and sidebar (as well as in my other menus). I’m not using any other post formats than I’m already using :) could it be that I’m using my code wrong? Or should I choose something else to get more columns on the recipe pages?

the third code worked perfectly as well :)

Now I have to bother you with a few more question, I’m sorry :)

I just really want my top menu like this https://munichpreschool.wordpress.com/our-team/ – so not white in full width on the menu, just 500 pixels or the theme width.

Is it possible for me to make a logo that can stick to all of the pages and not just the main menu?

I would also like to get rid of the date on each of the posts of the main page if that is possible.

Thank you so much for the help! :)
mynths · Member · Nov 12, 2015 at 11:16 am
Copy link
I’m sorry one last question… Can I use the theme’s original font on the menu (but not on the rest of the text)? is that possible?
g471n · Member · Nov 12, 2015 at 2:34 pm
Copy link
Hi mynths

To remove the dates from your posts add this line to your custom CSS.
```
.entry-meta-header {
    display: none;
}
```
g471n · Member · Nov 12, 2015 at 2:50 pm
Copy link
The CSS I gave you above will remove dates from all pages on your site. If you are only wanting to remove the dates from the main home page, this should work for you.
```
.home .entry-meta-header {
    display: none;
}
```
mynths · Member · Nov 22, 2015 at 12:47 am
Copy link
Thank you :)

Anyone know the other questions i wrote? :)
thesacredpath · Member · Nov 23, 2015 at 8:12 pm
Copy link
@mynths, there are a lot of questions here and I’m not entirely sure what all is left.

On the menu, there is limited width available, and your menu items labels are quite long. We can stretch it out, but it all depends on the width of someone’s browser window or what size screen on which they are viewing the site. You can try adding the following, but this will still go to two lines or more below about 1250px in width.
```
.primary-nav {
    width: 100%;
    text-align: center;
}
.primary-nav ul {
    display: inline-block;
}
```
We can restyle things and take the font in the menu back to normal instead of uppercase with the following. I’ve also set the font for the menu back to the original.
```
.primary-menu > li > a {
    text-transform: none;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: 600;
    color: #000;
    font-family: "Playfair Display",serif !important;
}
```
See what you think and let me know, and also let me know what else you wish to accomplish.
mynths · Member · Nov 24, 2015 at 1:05 am
Copy link
Thank you! Not sure if you answered this question, but I would really like the top area (white area, where the menu and header are) to be less wide. Exactly like this blog https://munichpreschool.wordpress.com/our-team/.
Is there some reason this isn’t working with my blog?

Thank you for all the help :)
thesacredpath · Member · Nov 24, 2015 at 6:31 am
Copy link
Ah, now I think I’m understanding what you are wanting. Give the following a try, but as you will see, we end up with two lines on the menu again.
```
.site-header, .main-navigation {
    max-width: 940px;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
}
```
We could remove the search from the header, or you could shorten “Kontakt meg” to just “Kontakt” in the menu.

If you want to remove the search from the menu area, you can add the following.
```
.primary-nav .search-form {
    display: none;
}
.primary-nav {
    padding-right: 0;
}
```
mynths · Member · Nov 25, 2015 at 3:41 am
Copy link
Thank you so much!!! Exactly as I want it now :D
mynths · Member · Nov 25, 2015 at 10:38 am
Copy link
Just one final question (as I can think of now)… I know I’m bothering you way to much :)

I asked you before, but the code didn’t work. I would really like one column (as it is now) on the home page. Altough it would be great if my recipes (under “Oppskriftsarkiv”) could appear in one or two columns, so people don’t have to scroll so far down to see them. Is there another code that might work? You said that you would “lock” the home page so it’s always one column there whatever I choose on the customizer.

Thanks :)
thesacredpath · Member · Nov 26, 2015 at 6:58 am
Copy link
The following targets only category pages and changes them into two-columns display on 700px and wider screens/windows and leaves everything else alone. At 699px and narrower, things revert to the original responsive design.
```
@media screen and (min-width: 700px) {
.category .hentry {
  width: 45%;
}
.category .hentry:nth-of-type(even) {
  float: left;
}
.category .hentry:nth-of-type(odd) {
  clear: right;
  float: right;
}
#infinite-scroll {
  display: inline-block;
}
}
```
mynths · Member · Nov 27, 2015 at 5:06 am
Copy link
Thank you it worked! :)
thesacredpath · Member · Nov 27, 2015 at 6:32 am
Copy link
You are welcome.

No items found.