Creating header image slider, and other layout tweaks

mrjamesbranson · Member · Oct 27, 2015 at 11:56 am
Copy link

Add topic to favorites
We want to turn the main header images content into a slideshow carousel of previous party photos, with a clickable link to the Facebook album which holds the rest of the photos. I know this would be easy with a wordpress.org site as I could just add a plugin, but it seems to be a real challenge with it being hosted on wordpress.com.

As an alternative, if someone can instead tell me how to add custom CSS to move a header link over the changing header images overlayed in white, that would be almost as good! As I can’t really customise the HTML on a wordpress.com site it’s proving difficult.

I know another option might be to add an image widget to the footer area, with the images linked to the Facebook album, and move the widget with CSS from the footer to the top of page where the current header image carousel resides?

As for the other tweaks I’m trying to do.. We need a design solution for the articles pages – i.e. https://mrjamesbranson.wordpress.com/2015/05/25/122/
as you can see the top image situation isn’t ideal with the black space and proportions etc. What I’m thinking is to move down “entry-header-wrapper” (the main heading and tags which are currently overlayed) to below the image and just above the articles. Then maybe shift the “More by this author” area to take over the right hand side column, shifting the image to take up the resulting left hand side on its own. Is there a solution or can anyone think of any better option to fix the current design?

Finally, we need a way to implement some banner ads! Will this be doable/easy for us on wordpress.com…or is this all sounding like we should just migrate already?

Hope someone can come and save the day! Sorry for the novel

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 27, 2015 at 9:42 pm
Copy link
Hi there, first thing I notice is that you have hidden the footer credits. You are not allowed to hide the WordPress.com and theme footer credits per our Terms of Service (#11). Even the VIP sites here at WordPress.com (CNN, Time, etc.) are required to keep the footer credits. See the Frequently Asked Questions on the Custom Design support page for more information.

You are allowed to restyle the footer credits to better fit with your design as long as they remain readable. If you would like help restyling the existing footer credits, we would be happy to help with that. Can you please remove the following two CSS rules from your custom CSS to unhide the footer credits.
```
.site-info {
    display: none !important;
}
.site-footer {
    display: none !important;
}
```
There are some themes here which have an image slider. They are typically aimed at photographers. In general though, what you find at the top of the themes here would be a “post slider”. You can check out our photography themes here, or you can explore themes with post sliders here.

On the image at the top of the post you reference, the Gazette theme has a recommended featured image size of 1920px x 768px, which is why you have the black showing on each side of the image. With that size image, you would not have the black showing.

The following moves the title and categories down below that image. What I’ve done here is to target all single post pages with this so that they will all look consistent. It seems to work fine on narrower windows/devices as well.
```
.single .entry-header-wrapper {
    position: relative;
    top: -20px;
    background: none;
    padding-bottom: 0;
}
.single .entry-header-wrapper .cat-links, .single .entry-header-wrapper .cat-links a, .single .entry-header-wrapper .entry-title {
    color: #222;
    text-shadow: none;
}
```
The “More by this writer” is in the site-content-inner div, which is on the same level as the featured image. That means we would have to use position:absolute; in order to move it up, and that doesn’t play nicely on responsive width themes since it would lose its relationship to the rest of the page elements and essentially float free above everything else, so it wouldn’t flow and adjust on smaller screens or narrower browser windows. With the above change, and wider windows the title and meta data has a max width of 930px, the width of the content area. You can also try adding this to let the titles flow over above the More by this writer section. Again, I’ve limited this to single post pages by using the “single” CSS body class.
```
.single .entry-hero .entry-meta, .single .entry-hero .entry-title
    max-width: 100%;
}
```
There are limitations on ads here at WordPress.com. Please see out support page on Advertising for more information.

If having your own advertising, or the ability to add an image slider and have more control over the layout and sizes of featured images and such is important to you, you may want to consider self-hosting your own WordPress installation, which you can find out more about here.
thesacredpath · Member · Oct 27, 2015 at 9:42 pm
Copy link
Oh, and sorry for the novel. :)

No items found.