Adelle theme – need help with the following!
-
Hi there,
I am have been working through the forums regarding the adelle theme and attempting to fix the problems with my blog myself. Some have been successful, some not so! Am looking for help with the following:
1. I recently uploaded a new header logo but it is really pixelated and I don’t know why. The jpg I uploaded is perfect. I’m assuming it is enlarging it to fit in the space, is there any way I can stop it from defaulting to that?
2. I have realised that the blue in the header is different to the blue in the nav bar and sidebar, I’ve got the code of the colour from the logo, where do I enter this into the CSS code to make it match?
3. I’m really not happy with the width of the page and not for a lack of trying cannot fix it! Is there a way to make the main column with the text wider without removing the sidebar? Or is that the default size for the theme? Also, I cannot make my photos the same width as the text?
4. Is there anyway to change the font sizing and colours WITHIN a post? eg; have some text one size, and then a particular line bigger or in a different colour?
Any help with the following would be greatly appreciated!
The blog I need help with is: (visible only to logged in users)
-
Let’s go through your list one item at a time.
1. I recently uploaded a new header logo but it is really pixelated and I don’t know why. The jpg I uploaded is perfect. I’m assuming it is enlarging it to fit in the space, is there any way I can stop it from defaulting to that?
I think you’re right about it enlarging to fit the space. The theme purposely does that. Each theme has a recommended set of dimensions for the header image. In Adelle, the recommended theme header image dimensions are 1040 x 250 pixels.
To undo that setting and prevent a smaller sized image from stretching, you can add this to your Appearance > Customize > CSS editor:
.site-header img { width: auto; max-width: none; } -
Hi designsimply, thank you that worked perfectly :)
Would you have any advice for the other points? -
2. I have realised that the blue in the header is different to the blue in the nav bar and sidebar, I’ve got the code of the colour from the logo, where do I enter this into the CSS code to make it match?
Here is a guide that will help you find what selectors to use for a task like that:
As you can see, by copying the selector that the theme itself is using, you can change the colors for a bunch of relevant things at once.
Here is the CSS example from the screencast:
.navigation-main, .navigation-main ul ul, .menu-toggle, .main-small-navigation ul.nav-menu.toggled-on, .post-date, .sticky .entry-title:before, .site-footer, #social-networks a { background: red; }Change “red” to the color code of your choice.
You might also like:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/ -
3. I’m really not happy with the width of the page and not for a lack of trying cannot fix it! Is there a way to make the main column with the text wider without removing the sidebar? Or is that the default size for the theme?
In the Adelle theme, the width is set in em units. There is a max-width on the main container for desktop sized screens which is set up like this:
@media screen and (min-width: 37.5em) { .site { max-width: 73.750em; } }^^ This example increased the theme’s max-width by 10 em from 63.750em to 73.750em. Try adjusting the number while in the Appearance > Customize > CSS editor and watch the liver preview to see how it changes.
Also, I cannot make my photos the same width as the text?
Media width adheres to a setting called the content width setting which you can adjust using the form field just below the CSS editor in the Appearance > Customize > CSS panel.
In the Adelle theme, the default content width setting is 640px. If you update the max-width unit as shown above, then you would need to approximate that 73.750em unit into pixels to allow embedded media to go above 640px. It looks to me like 935px would work well in this case. If you were to change the 73.750em value, then you should also adjust the content width value to match—just test it while you’re in the Appearance > Customize > CSS panel to see what works best.
Note that this will set up the default embedded media size to work best with the CSS changes outline above for new posts you create. It’s possible that images in already existing posts have a hard coded width for some of the images, depending on how you added them. For those, you may need to edit the post, remove the image, and re-add it after the content width setting has been updated and they should get inserted at the new content width if you select the full width insert option.
-
4. Is there anyway to change the font sizing and colours WITHIN a post? eg; have some text one size, and then a particular line bigger or in a different colour?
The visual editor has some options for that (not extensive). Here is a help page about all the options available in the visual editor:
http://en.support.wordpress.com/visual-editor/Or you can use custom HTML to make individualized font size and changes. This help page has all the detailed instructions about how to do that:
http://en.support.wordpress.com/editors/styling-individual-posts-and-pages/I would recommend sticking with the CSS editor for anything that can be edited that way or anything that you want to change site wide because it makes it easier to edit all at once. For example, if you wanted to add a custom class name in your post HTML like this:
<span class="mycustomclass">content goes here</span>Then you could style every instance where you add something like this with a rule like this in your Appearance > Customize > CSS editor:
.mycustomclass { color: red; } -
Apologies for the delay before! I think you’re off to a great start here! And I like the changes you’re looking to make. :)
- The topic ‘Adelle theme – need help with the following!’ is closed to new replies.
WordPress.com Forums 