Cubic Theme Customization

  • Unknown's avatar
    igicheva · Member ·

    Hi there,

    I have few questions about some customizations I want to make to Cubic theme as I am new to CSS:

    – Can I add some kind of text intro before the photo grid like welcoming message?

    – Can I add some spacing between the thumbnails on homepage and both to left and righ?

    – I’ve add custom CSS to enlarge the pages width but now I cannot align the content in the Posts pages in the center, so is there a way to do it?

    – And also about the Posts content – I am not using featured photo but block ones and cannot change sizes – I am actually changing them in the block’s Image dimensions but there is no difference in the front end as there is some default theme size. So can I resize the photos with CSS?

    I hope I asked my questions correctly and any help will be much appreciated! :)

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    – Can I add some kind of text intro before the photo grid like welcoming message?

    It’s possible to add text content using CSS, but you can only add plain text this way. You cannot format text you add in this way.

    But first, please delete this line in your custom CSS:

    @media only screen and (max-width: 768px) {

    That’s an incomplete declaration, and will cause anything new you add to your custom CSS to not work.

    Once you’ve deleted that, you can add in this to add some text above the grid on the front page:

    /* Add message above post grid on front page */
main#main.site-main::before {
	content: "this is some text";
		color: black;
}

    Replace the text between quotes with what you want to appear.

    – Can I add some spacing between the thumbnails on homepage and both to left and righ?

    This code will add some spacing:

    /* Add spacing between thumbnails on front page */
.blog .hentry.has-post-thumbnail .attachment-boardwalk-featured-image {
	margin: 10px;
}

    But you’ll see it reveals a black background behind the images that I can’t find where it’s coming from, so can’t get rid off. It also pushes the right-most image off the edge of the content area, and I can’t find a way to prevent that.

    – I’ve add custom CSS to enlarge the pages width but now I cannot align the content in the Posts pages in the center, so is there a way to do it?

    Can you point me to the page with the problem? I checked both your single-post view, and your About Me page, and content appears centered on both of them for me.

    – And also about the Posts content – I am not using featured photo but block ones and cannot change sizes – I am actually changing them in the block’s Image dimensions but there is no difference in the front end as there is some default theme size. So can I resize the photos with CSS?

    Cubic is an old theme that predates the block editor by several years, so the theme doesn’t have styling built in for most of the new settings and options the block editor introduced. You’ll also see, for example, that the Wide and Full Width alignment options are not available in the editor for this theme.

    If you want to customize your content using those block editor features, I’d recommend you switch to one of our newer block-based themes instead. Then you can use the Blog Posts block to create a posts page that still shows your posts as featured images in a grid layout, similar to Cubic. But you’ll have much more direct control over different elements on the page, and might be able to achieve much of what you want with no CSS at all.

    Also note that your plan gives you access to both live chat and direct email support. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact

  • Unknown's avatar
    igicheva · Member ·

    Thank you so much!
    I really appreciate the clarifications and the help with CSS. :)

    According to the center alignment, for example one page: https://ivianagicheva.com/2022/01/25/coupons-and-discount-codes-app/ but I am starting to think that the content is actually centered but it does not appear that way for me because of the overall page width that is applied with CSS.

    And will take into consideration your advice to look up for some block-based themes, but I just like Cubic because of the homepage layout and the hover effect.

  • kokkieh · Staff ·

    Hmm, the content on that page appears completely centered to me. If it doesn’t for you, it could perhaps depend on screen size as well.

    What size monitor are you viewing the site on, and using which browser?

    I just like Cubic because of the homepage layout and the hover effect.

    I love Cubic myself. It has long been one of my favourite blog themes, and I used it on my photography blog for a while. So I get where you’re coming from. But it has become a bit outdated, and I wouldn’t be surprised if we retired it in the not-too-distant future, so perhaps don’t get too attached to it :)

    If you want to experiment a bit with the newer block themes, you can always create a new site in your account, import some of your existing content to it, and play around with it while leaving your actual site unaffected.

  • Unknown's avatar
    igicheva · Member ·

    Yes, I realize that a minute later when I preview the site on a desktop screen and the content was aligned in the center… Anyways, big thank you for the support and tips!

    And I actually decided to switch to Dyad 2 theme because I believe my Cubic-based vision is becoming too messy with the CSS. :)

  • kokkieh · Staff ·

    Dyad is a great option as well. If you run into any trouble setting it up, you know where to find us :)

  • The topic ‘Cubic Theme Customization’ is closed to new replies.