Help with Cubic theme

  • Unknown's avatar
    aworkinghand · Member ·

    Hello

    I am trying to do a few things to adjust Cubic theme and am looking for some CSS.

    1. I would like the site title to be lower case
    2. I would like the site title to sit next to the logo not underneath
    3. I would like to adjust the size of the site title and the distance between letters.
    4. I don’t want a black line between posts.

    I hope someone can help, thank you for your time in advance.

    R

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

  • staff-loquaciousloon · Staff ·

    Hi @aworkinghand!

    Let’s see:

    I would like the site title to be lower case

    .site-title {
	text-transform: none;	
}

    This will display it how you typed it, not automatically all lowercase :)

    I would like the site title to sit next to the logo not underneath

    .site-branding .clear {
    clear: none;
    float: left;
}

@media screen and (min-width: 768px) {
	.site-branding .clear {
		margin-top: 20px;
	}
}

    I would like to adjust the size of the site title and the distance between letters.

    Not knowing how you want to adjust these makes it hard (smaller or larger? wider spacing or narrower?)

    This style represents what is happening now, try changing the numbers to get your desired effect:

    .wf-active .site-title {
	font-size: 2.2em;
	letter-spacing: .0625em;
}

    With em sizes, decimals are allowed, so start with small changes :)

    I don’t want a black line between posts

    This one is a little less doable. That line appears to be triggered by some of the calculations your browser has to do when determining the widths of the different images, so we can’t remove it completely.

    You can, however, change it’s color:

    .archive .hentry.has-post-thumbnail, .blog .hentry.has-post-thumbnail, .search-results .hentry.has-post-thumbnail {
    background: #fff;
}

    Replace #fff with a different HTML color code :)

  • Unknown's avatar
    aworkinghand · Member ·

    Woah! Thank you so much for all of these chad1008 – so helpful!

    Just one more question – how do I make the site title be in the middle of the page, not align to the left where the logo is?

    Thanks!

    R

  • Unknown's avatar
    aworkinghand · Member ·

    Also on my blog posts I would like the font to be the same as site title – so Futura and it isn’t coming up as an option so think it has to be CSS?

    Thank you!

    R

  • staff-loquaciousloon · Staff ·

    We’d have to change a few different things to center the title – give this a try:

    #masthead {
    text-align: center;
}
.site-logo-link {
    position: absolute;
    left: 0
}
.site-title {
    float: none;
}
.site-branding {
    width: auto;
    float: none;
    display: inline-block;
}

    Regarding your font question, I didn’t see any text in your current posts, but this CSS should do the trick for individual post displays:

    .single .entry-content {
    font-family: "futura-pt","futura-pt-1",sans-serif;
}
  • Unknown's avatar
    aworkinghand · Member ·

    Thank you again chad1008, so helpful – those codes all worked!

    More questions!

    1. How do I adjust the size of the font in the blog posts – at the moment it is far too big and I can’t see where to change this?

    2. There is a link at the bottom of all blog posts called ‘image’ – I would like to get rid of this.

    3. How do I change the width of the text column in blog posts?

    Thank you!

    R

  • staff-loquaciousloon · Staff ·

    1. How do I adjust the size of the font in the blog posts – at the moment it is far too big and I can’t see where to change this?

    This is coming from your custom CSS style:

    .entry-content {
	font-size: 100px;
}

    Try removing/adjusting that :)

    2. There is a link at the bottom of all blog posts called 'image' - I would like to get rid of this.

    That’s the Post Format Link. You can hide it with the following CSS:

    span.post-format-link {
  display: none;	
}

    3. How do I change the width of the text column in blog posts?

    @media screen and (min-width: 768px) {
.entry-author, .entry-content, .entry-footer {
    width: 768px;
    max-width: 100%;
}
}

    Try using that CSS style, then increase the width: 768px number :)

  • Unknown's avatar
    aworkinghand · Member ·

    Thank you so helpful!

    Is there some coding that means I can adjust the width between the site title and the images below?

    Thank you!

    R

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @aworkinghand, this is a bit tricky due to the way the theme is structured. First off, add the following to your .site-branding CSS rule,
    min-height: 73px;
    As you adjust that number, you will notice that part of the images are hidden at the top. To get the images moved down, you need to add this CSS rule and then adjust the top margin value until things are aligned as you desire. Typically this will mean adding or subtracting the amount you add or subtract on the site branding min height. 

    .site-main {
	margin-top: 111px !important;
}
  • Unknown's avatar
    aworkinghand · Member ·

    This is great, thanks.

    Could you tell me where the ‘pages’ are? I have made a test one called ‘About but i can’t seem to find it on the site?

    Also – am I able to centre the featured image and test in blog posts. And the moment they are aligned to the left – I would like them central.

    Thanks

    R

  • Unknown's avatar
    thesacredpath · Member ·

    For your pages to be accessible from your site, you will need to create a Custom Menu, add the pages to it, and then assign that menu to the Primary Menu Location.

    Cubic recommends a featured image size of 2000 x 1500 pixels. We can use the following CSS to center the images on single post pages. 

    .single .entry-content .image-big  {
	margin-left: auto;
	margin-right: auto;
}
  • The topic ‘Help with Cubic theme’ is closed to new replies.