Isca Theme Questions on Formatting

  • Unknown's avatar
    taramulhall · Member ·

    I am using the Isca theme for my blog and have a few questions. You can access my blog here: http://bbhmarketsblog.wordpress.com/
    1. Is there a way to left align the main box with my posts? For instance, I currently have a black background and the content is included in a center aligned white section. Can this white section be left aligned?
    2. Can I move the date and ‘leave comment’ link to under the content? It takes up a lot of space, so looking to open up some real estate.
    3. Can we change the amount of text that is displayed after each post? Currently four lines of text display, can I adjust to three?
    4. Finally, am I able to change my red header background to a red pantone (pms) 186, html C60C30?

    The blog I need help with is bbhmarketsblog.wordpress.com.

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

  • Unknown's avatar
    designsimply · Member ·

    Welcome! I can help you get started with these tasks so you can learn to manage the CSS on your own in the future. I’ll take a look at your questions one at a time.

    1. Is there a way to left align the main box with my posts? For instance, I currently have a black background and the content is included in a center aligned white section. Can this white section be left aligned?

    You can turn off the centering of the main content area in the Isca theme by adding the following to your Appearance > Customize > CSS editor:

    #content {
	margin: 0;
}
  • Unknown's avatar
    designsimply · Member ·

    2. Can I move the date and ‘leave comment’ link to under the content? It takes up a lot of space, so looking to open up some real estate.

    This is a little more tricky. I worked on a solution that you can try out and then adjust. I would also encourage you to check out some basic CSS resources. Here is a great article about absolute positioning which is what I used to move the date from the top to the bottom:
    http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    The last part of this example uses a media query to make a small adjustment to the bottom padding of that same element for smaller screens like mobile devices. Here is a help page about media queries so you can learn how they work:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    #content {
	margin: 0;
}

.page .fourcol, .post .fourcol {
	width: auto;
	float: none;
	position: absolute;
	bottom: 20px;
	margin: 0;
}

.page .eightcol, .post .eightcol {
	width: 100%;
	float: none;
}

.page .commentcount, .post .commentcount {
	display: inline;
	padding-left: 1em;
}

.post.format-standard .post_format_type, .post .post_format_type {
	display: none;
}

@media handheld, only screen and (max-width: 720px) {
	.page .fourcol, .post .fourcol {
		bottom: 0;
	}
}

    This example is a bit more advanced than the first one, but I’m hoping you’ll be able to follow along without too much trouble. Test it out and see what you think!

  • Unknown's avatar
    taramulhall · Member ·

    Hi designsimply!

    The left alignment worked, but now I realize why the theme is not already formatted that way- it does not look good!

    The CSS language you included to move the date, ‘Continue Reading’, and comments links causes some of the entries to have the date override the Continue Reading. Are we able to put the date on the top right corner of the post, the Continue Reading on the bottom right, and leave ‘Leave a Comment’ in the bottom left?
    Thanks!

  • Unknown's avatar
    designsimply · Member ·

    I think it looks better centered too. :)

    Are we able to put the date on the top right corner of the post, the Continue Reading on the bottom right, and leave ‘Leave a Comment’ in the bottom left?

    I see the overlap now too, so I must have left something out before or copied my test example wrong or something else changed. Try adding this to the example to fix the spacing:

    .entry-date {
	display: inline;
}

    Moving the date to the top right would be a bit harder, but you could do it. This guide is the first thing you’ll want to check out so you have a better understanding about how absolute positioning works:
    http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    It’s a little tricky, but I can be here to help you get started with basic examples and point you to where you can learn more.

  • Unknown's avatar
    designsimply · Member ·

    3. Can we change the amount of text that is displayed after each post? Currently four lines of text display, can I adjust to three?

    There isn’t a setting to change the number of lines, but what you can do is manually enter an excerpt for each post yourself and control the amount of text that appears that way. Here is a help page explaining how to use excerpts:
    http://en.support.wordpress.com/splitting-content/excerpts/

  • Unknown's avatar
    designsimply · Member ·

    4. Finally, am I able to change my red header background to a red pantone (pms) 186, html C60C30?

    Here is how the red bar at the top of http://bbhmarketsblog.wordpress.com/ is currently setup:

    #masthead {
	background-color: #B42526;
	border-bottom-color: #8B1C20;
}

    You can copy that, swap out the color codes, and paste the final CSS snippet into your Appearance > Customize > CSS editor to make a change to those colors.

    Pantone colors are made for print, so there is not a way to enter a Pantone color for the web. But! You can probably approximate the color by using an eye dropper tool to grab the color from an existing element on a web page (i.e. a logo or image you upload would work). The latest Firefox has a color eye dropper built in, here’s a guide about how to use it:
    https://developer.mozilla.org/en-US/docs/Tools/Eyedropper

  • Unknown's avatar
    taramulhall · Member ·

    Great – thank you~~

  • The topic ‘Isca Theme Questions on Formatting’ is closed to new replies.