Rachel

Hi Gaurav, that’s great news, thank you!

Hi! I’d be happy to help you get started with these changes. ?? However, I want to note that your site at https://southchinamorningtoast.com/ is hosted at WordPress.com, so the best place to get help customizing it is in the WordPress.com CSS Customization forum. (This forum is primarily for self-hosted WordPress sites using the Pictorico theme.)

1. Can I make the header static (so that it remains visible while scrolling) something feasible?

Yep, there’s a post in the WordPress.com forums with the CSS you can use to do this in the Pictorico theme:

https://en.forums.wordpress.com/topic/sticking-header-menu

I’d recommend starting with that and seeing how that goes for you.

2. I’d like to add a roughly thumbnail size logo just to the left of the title.

This is a bit trickier, because you’re wanting to add content (the image) that isn’t already present in the theme. However, you could use a background image to get that effect with something like this:

.site-branding {
background: url(https://placekitten.com/g/150/150) no-repeat left center;
padding-left: 175px;
}

Of course, you’ll want to replace the image URL in that CSS with your logo’s URL, and adjust the padding according to the width of the logo.

3. Can I turn on the tagline for the site, and what is the CSS to manipulate its presentation?

Sure! Pictorico just hides the tagline using CSS, so you can change that with CSS as well. Here’s how to make that change:

.site-description {
display: block;
}

Changing how the tagline appears depends on exactly what changes you’re trying to make. To find the right CSS to make further changes for your site, I’d recommend using this guide for How to Find Your Theme’s CSS.

nnayr3, you can either create a child theme (as mentioned in your forum thread here) or you can use a custom CSS plugin to just make CSS tweaks like this. I like to use the custom CSS module in Jetpack for that sort of thing.

If you’d like to put the image on the post background, you can use CSS along these lines:

.postid-123 .hentry {
   background: url(https://path/to/your/image.jpg);
}

Again, you can replace the post or page ID in that CSS with the one you want to change the background for.

Can you let me know more about the phone and laptop where you’re seeing the issue? Specifically what operating system and browser (including the version number) are you using to view the site?

I checked on my laptop (running Mac OS X version 10.9.5, using Chrome version 38.0.2125.122) and on my phone (in Safari on an iPhone 6 running iOS 8.1.1). If you’re using different devices or browsers, it could be a browser-specific issue. Knowing more about that might help narrow down the source of the problem.

Hi there,

I see that your site at https://futuridentes.com is hosted on WordPress.com. That’s a bit different from self-hosted WordPress sites using the Untitled theme, so you’ll get the best advice for your site in the WordPress.com Themes forum and the WordPress.com CSS Customization forum. ??

In this case, the drop-down menu in Untitled is built in as part of the theme’s responsiveness, to help give your site’s visitors the best experience for the size of their screens. On WordPress.com, the theme files that add that mobile menu can’t be changed.

Hi there,

The Goran theme uses a little magic (well, not magic — Javascript, actually!) to move the hero image up behind the header. You can change that with CSS by re-adjusting the header’s bottom margin when there’s a hero image on the page:

.hero-image .site-header {
margin-bottom: 0 !important;
}

If you’d like that header area to have a white background you can add that in to that CSS, as well:

.hero-image .site-header {
margin-bottom: 0 !important;
background: #fff;
}

You’ll probably also want to make some adjustments to the text and link colors, and text shadows, to get the full effect you’re looking for. Let me know if I can do anything more to help with that. ??

Also, you may already know this, but it’s best not to make changes like this directly to a theme’s files, as you’ll lose those changes the next time you update the theme to the latest version. Instead, I’d recommend using a CSS plugin (like the Custom CSS module in Jetpack) when you just need to make some CSS tweaks to a theme’s design.

As an alternative to the CSS that RossMitchell suggested, you could also target just the tags (leaving other entry meta like categories on the page) with code like this:

.home .tag-links {
display: none;
}

Hi Elisa,

That entire section is the entry meta, and in Pictorico the div containing the date and author has the class entry-meta. As RossMitchell suggested, you can use CSS like this to remove it:

.entry-meta {
display: none;
}

Hi Vincent,

I just checked your site at https://www.onemicstudio.com/ and I’m seeing the black box around all the icons there: https://cloudup.com/c3Io2icRThJ

The background behind the menu and widgets at the top of the page is also black when I look at it there.

Were you able to sort this out yourself, or is there anything more I can do to help?

Comments are a part of WordPress itself, and you can turn them on and off for individual pages in the “Discussion” box in the editor:

https://codex.www.ads-software.com/Comments_in_WordPress#Turning_on_Comments_for_a_Single_Post_or_Page

In the Writr theme, turning off comments on a page will remove the entire comment area on the page.

I’m glad you found a workaround. ?? If the issue does come back with the Goran theme, let me know and I’ll see if I can help figure out what’s going wrong there.

Hi Elisa, I’m glad you were able to resolve this. Thanks for letting me know! ??

I find that sometimes trying one solution can make a new issue appear. ?? The main issue now sounds like the responsive aspect of the featured image, so let’s take a look at that.

One possible solution is to use a maximum height instead of a fixed height, like this:

.hero.with-featured-image {
max-height: 422px;
}

That way the featured image will never be more than 422 pixels in height, but it will still scale down on smaller screen sizes.

Another option, if you’d like more control over the exact height at various screen sizes, is to use CSS media queries. That way you can apply different CSS declarations depending on the screen size. You can find more about media queries at these links:

https://en.support.wordpress.com/custom-design/custom-css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Hi! A 500 internal server error doesn’t give too much information about what actually caused the problem — it’s a generic server error that could be related to an issue with your host or your WordPress configuration.

Sometimes this error comes up when you reach your PHP memory limit. In that case, you can increase the memory allocated to PHP in WordPress: https://codex.www.ads-software.com/Editing_wp-config.php#Increasing_memory_allocated_to_PHP

You can also check to see if this error always happens when you click on Customize. For example, does it happen with other themes? Does it happen if you disable all of your site’s plugins?