The Columnist Theme – It's Amazing but need some help

  • Unknown's avatar
    stevemcp2002 · Member ·

    I have the columnist theme and there with CSS customisations enabled. I would like to know how, if possible, to have the widgets displaying on the right hand side of the page all the time as I think this is currently a waste of space and there is no easy way to get to the widgets that I know of.

    Thanks – I look forward to your help

    Steve

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

  • staff-happychia · Staff ·

    Could you try this style and see if you like it?

    #content {
	position:relative;
}

div#first {
	position:absolute;
	top:650px;
	right:0px;

}

div#second {
	position:absolute;
	top:900px;
	right:0px;
	bottom:0px;
}

div#third {
	position:absolute;
	top:1350px;
	right:0px;
	bottom:0px;
}

div#fourth {
	position:absolute;
	top:1650px;
	right:0px;
	bottom:0px;
}
  • staff-happychia · Staff ·

    What this style does is to move the widgets from footer area to the space alongside the post content.

    Widgets display fine if there is enough space alongside the post content. However if there is not enough space esp. in short post page like this, the widgets are going to cramped.

    I am yet to figure a way to increase the height and width of the content area.

    We can move only one or two widgets to the side by copying the styles for individual widgets. Eg. copy only div#first and div#third styles to move only first and third widgets to the side. Second and fourth stay in the footer.

    Let me know how would you like the widget arrangement, and we can work towards it.

  • Unknown's avatar
    thesacredpath · Member ·

    Steve, CSS is a styling document used by the browsers to position and style the different elements of a web page. On pages that do not show widgets, such as your main blog page, category and archive pages, the sidebar does not exist in the page, and CSS cannot be used to add it to those page types.

    On your single post pages and on static pages such as an about page, one of the widget areas in the footer could be moved up and to the right of the content since they exist on those pages.

  • Unknown's avatar
    stevemcp2002 · Member ·

    Thanks for this – how do I move the widgets up on the post pages?

    Also – is there anyway that I can increase the width of the elements on the main page so as not to have so much blank space at the right hand side?

    I appreciate your help with this.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, give the following a try, but keep in mind that we have widened the overall content area to over 1100px, so for some on smaller computer screens, they may have to scroll in order to see the content on the right side. The following places the fourth footer widget area (the one with the Twitter widget) on the top right below the post meta data. Originally you had a header image when I started on this, and now I see you don’t, so the following is based on no header image. See what you think. This only does the single post pages, not static pages since it doesn’t look like you have any yet.

    .single #main, .single .site-footer {
    width: 1140px;
}
.single #content {
    float: left;
    width: 790px;
}
.single #main:after {
    width: 820px;
}
.single #fourth {
    position: absolute;
    right: 0;
    top: 170px;
}
.single .entry-content {
    width: 600px;
}
.single .entry-header img {
    height: auto;
    width: 100%;
}
.single .site-footer {
	width: 1155px;
}
.single #secondary {
	width: 1120px;
}
.single #first, .single #second, .single #third {
	width: 32%
}
.single #third {
	margin-right: 0 !important;
}
  • Unknown's avatar
    stevemcp2002 · Member ·

    Thanks for this – I’ll give it a go!

    Is there any way I can stop the images from turning black when they are hovered over?

  • Unknown's avatar
    thesacredpath · Member ·

    That is an opacity change on hover, which you can get rid of with the following CSS. 

    #feed-wrap .thumbnail:hover img {
    opacity: 1;
}
  • Unknown's avatar
    stevemcp2002 · Member ·

    Wow, that’s brilliant – thanks. Based on that I “tried” to figure out how to apply the same logic to my title image but couldn’t work out which element I should use instead of “thumbnail”.

    I appreciate your help again :)

  • staff-happychia · Staff ·

    #masthead .thumbnail img:hover
    is the selector for your title image.

    Here is the complete style: 

    #feed-wrap .thumbnail:hover img, #masthead .thumbnail img:hover {
    opacity: 1;
}
  • staff-happychia · Staff ·

    …or we can even hover on thumbnail as following. Either will do.

    #masthead .thumbnail:hover img

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • Unknown's avatar
    stevemcp2002 · Member ·

    Do you know how to do my new query? :)

  • Unknown's avatar
    thesacredpath · Member ·

    Whoops, this will do it for your title image. 

    #masthead .thumbnail img:hover {
    opacity: 1;
}
  • Unknown's avatar
    stevemcp2002 · Member ·

    thanks again! I have another question though :)

    Is there any way to make the menu bar appear on every page?

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

    I took a look at the CSS, hoping that perhaps they had just hidden the top menu on other pages, but it is not there, so there is no way to make it appear.

  • Unknown's avatar
    azjohnkelly · Member ·

    Hello, my site/blog (azjohnkelly.wordpress.com) will only display 8 posts in Chrome. Here are some issues and info: 1) I am using the “Columnist” theme. 2) I am not a web designer so common web lingo needs defining. 3) I think the issue is with the “continuous scroll” setting under the “reading” pull-down tab. It says it will display 8 posts, but I have seen other Columnist themed sites work well with Chrome. 4) I currently have 9 posts. 5) I am using the free WP page, will upgrading correct this?
    Thank you for any advise you share. -John

  • Unknown's avatar
    designsimply · Member ·

    azjohnkelly, I checked https://azjohnkelly.wordpress.com/ just now and I see you’ve switched to the Cubic theme. If you need further help with theme setup questions, like the one you were asking about The Columnist before, please start a new help request in the themes forum at https://en.forums.wordpress.com/forum/themes

    Aside: Cubic is one of my favorite new themes. Great choice!

  • Unknown's avatar
    stevemcp2002 · Member ·

    Thank you! I really appreciate all the help I have been given so far. Many thanks.

  • Unknown's avatar
    designsimply · Member ·

    Cheers :)

1 2
  • The topic ‘The Columnist Theme – It's Amazing but need some help’ is closed to new replies.