how to move title in header down to body text (collective theme)
-
On each page the title or the heading is shown quite big in the middle of the header. I’d like to have the page title inthe body text (paragraph). I’ve been told to use CSS for this. How do I know what to type in to make this change?
The blog I need help with is: (visible only to logged in users)
-
Hi!
Just so we’re on the same page, you’re looking to move the title of a page down like this screenshot example:
Is that correct? Did you want the header image to remain the same size?
-
Thanks for the response!
Exactly! and yes, the header image shouldn’t change at all. And if it’s not possible I am wondering if the title in the header is movable and if you can change the color as well as the size of it?
-
-
It’s going to be a bit easier to move the title within the header element (and change the color). We won’t need to adjust as many elements within the page (which will make sure the mobile layout looks great as well). How would you like it moved within the header element? We could set that up first and see what you think!
-
can we just remove the title from the header and I’ll write it in the paragraph using a heading? that would be the easiest I think.
A few more questions:
is it possible to have the same size for all the balks in the menu structure above? as of right now, they adapt to how long the word is you type in… and I’ll just like them to have the size of the longest balk as of right now.
can the color (black) of the banner above the header be changed?
also how can I change the font size individually? E.g. if I change the size of the blog title (Bären Areal Seengen), it changes the all the others too and that sometimes is a big difference. I’d like to have the blog title as well as the menu titles bigger without changing any other titles.
Quite a lot of questions, sorry :)
-
can we just remove the title from the header and I’ll write it in the paragraph using a heading? that would be the easiest I think.
This should do the trick:
h1.headline.img-headline { display: none; }is it possible to have the same size for all the balks in the menu structure above? as of right now, they adapt to how long the word is you type in… and I’ll just like them to have the size of the longest balk as of right now.
Can you give this a try?
.menu a { width: 100px; text-align: center; }can the color (black) of the banner above the header be changed?
Definitely – can you give this a try?
#header { background-color: ###; }We’ll still have a few things to change, but that should get us started. You’ll just need to replace the ### with the hex code you would like.
also how can I change the font size individually? E.g. if I change the size of the blog title (Bären Areal Seengen), it changes the all the others too and that sometimes is a big difference. I’d like to have the blog title as well as the menu titles bigger without changing any other titles.
This should do the trick:
h1.site-title.no-logo a { font-size: 30px; } #navigation { font-size: 30px; } -
this all worked perfectly, thank you!!!
I managed to change the color of the balks in the main menu when you hover over them, now I’d like to have that same color when they are active, meaning when you click on one of the balks/pages. For the hovering part I used the code below. I don’t know what to type in for the “active part” though.
.navigation-main li:hover > a {
background-color: #….;
}Then I’d like to remove the borders at the bottom and top of the menu. I read somewhere to use the code below or just insert “none” instead of the color. I’m not too sure where to insert that “none” though. It didn’t work when I tried.
.navigation-main {
border-bottom: 1px solid #…;
border-top: 1px solid #…;
}The balks in the submenu are still bigger than the ones in the main menu. The background color as well as the hovering didn’t change in the submenu only in the main one. How can I do this? And if you can have a look at my submenu.. the text is not centered and the hovering also doesn’t cover the whole balk only part of it. Kind of hard to explain… I’d like to have the text align on the left (only in the submenu), the balks the same size as the balks of the main menu and the same colors (background and hovering) as well.
Lastly, the first paragrah of the body text comes in a light grey and a bit bigger than the rest (seen on demo). How can I turn this off?
I hope this makes sense. Thank you so much for your help.
-
For the hovering part I used the code below. I don’t know what to type in for the “active part” though.
This should work!
#wrap .menu a:active { background-color: red; }Then I’d like to remove the borders at the bottom and top of the menu. I read somewhere to use the code below or just insert “none” instead of the color. I’m not too sure where to insert that “none” though. It didn’t work when I tried.
That’s actually a bit trickier as it involves changing the height of the menu bar (it’s not just a border). Could you post to CSS Customizations here?
https://en.forums.wordpress.com/forum/css-customization
We have some gurus in that forum that will be able to help you out! The current method I’m trying messes up how your site displays on mobile devices.
The balks in the submenu are still bigger than the ones in the main menu. The background color as well as the hovering didn’t change in the submenu only in the main one. How can I do this?
I’m going to direct you to the CSS customizations forum for this one as well! I’m stumbling finding the correct CSS. Sorry!
Lastly, the first paragrah of the body text comes in a light grey and a bit bigger than the rest (seen on demo). How can I turn this off?
This should work!
.article > p:first-of-type { color: rgba(0, 0, 0, .8); } -
when I was talking about “active” I meant to change the color of a balk when its page is currently open. If you look at my website the banner is in a light green, the hovering in a darker green and the active page shows in the banner a black balk. I’d like to have it in that darker green color of the hovering though.
another question: centering a gallery doesn’t work in the visual text editor. The alignment remains on the left. How can I change it? I tried adding more photos, hoping they would show up on the right hand side of the body text but instead the photos just become smaller, still aligned on the left.
-
when I was talking about “active” I meant to change the color of a balk when its page is currently open. If you look at my website the banner is in a light green, the hovering in a darker green and the active page shows in the banner a black balk. I’d like to have it in that darker green color of the hovering though.
Sorry about that! This should change the background color of the currently active menu item:
#navigation .menu .current_page_item a { background: red; }centering a gallery doesn’t work in the visual text editor. The alignment remains on the left. How can I change it? I tried adding more photos, hoping they would show up on the right hand side of the body text but instead the photos just become smaller, still aligned on the left.
Can you send over the URL where you’re entering the gallery? I checked your posts, but I didn’t find a gallery.
-
http://baeren-seengen.ch/geschichte/
here’s an example of a page with a gallery. The gallery doesn’t spread over the entire body text instead it has its own width which doesn’t change at all even if I change the column number from 4 to 5, meaning adding more image squares (from 8 to 10). The images become smaller but the width stays the same. How can I adapt the gallery width to the body text width?
How can I remove the footer text (Bären Areal Seengen. Bloggen Sie auf WordPress.com. · The Collective Theme.)?
The mobile version doesn’t work for my theme, the only thing that is transferred correctly is the menu. The design is totally messed up (other colors, no headers etc). When I turn off the mobile version, the website comes as I wish but without the submenu in the main navigation. Do I need a CSS code for that?
-
here’s an example of a page with a gallery. The gallery doesn’t spread over the entire body text instead it has its own width which doesn’t change at all even if I change the column number from 4 to 5, meaning adding more image squares (from 8 to 10). The images become smaller but the width stays the same. How can I adapt the gallery width to the body text width?
I’ve tried expanding the gallery items a bit, but it gets a bit messy. I think it will be easier to go with a centered appearance. Can you give this a try?
.tiled-gallery { display :block; width: 948px; margin: 0 auto !important; }Please note, this code is specific to the Collective theme.
How can I remove the footer text (Bären Areal Seengen. Bloggen Sie auf WordPress.com. · The Collective Theme.)?
That footer attribution is required per our Terms of Service. Please leave that in place.
The mobile version doesn’t work for my theme, the only thing that is transferred correctly is the menu. The design is totally messed up (other colors, no headers etc). When I turn off the mobile version, the website comes as I wish but without the submenu in the main navigation. Do I need a CSS code for that?
Here’s what I currently see when I visit your site on a mobile device:
The design appears to carry over correctly. Please note, your menu won’t necessarily look the same as it’s hidden behind an icon (this is part of the responsive design). Could you explain exactly what details are missing?
Regarding the submenu, it looks like that isn’t part of the mobile navigation. I’ll report that to our theme developers and see what we can do!
Just a note, if you have any additional new questions, let’s try to move them to a new thread. That way, this thread can be mostly related to the thread title.
-
Hi!
I just wanted to follow up here regarding the Collective theme. I did some additional investigation, and it looks like sub-menus are supported in the mobile version of the Collective theme. They should appear like this (dashes indicate sub-menu):
It looks like you’ve already switched to the Radcliffe theme, but I wanted to circle back just in case you wanted to give Collective another shot.
- The topic ‘how to move title in header down to body text (collective theme)’ is closed to new replies.
WordPress.com Forums 