Jump to content
Sign in to follow this  
Demonolith

Multiple banners on mobile version [Jetpack]

Recommended Posts

Hi all,

 

Each page on my site uses its own specific header image relevant to it.

 

I did this via WP Display Header plugin, but I don't know how to do this for the mobile version of the site i.e. the same banner appears on every page.

 

Is this possible? If so, how?

 

Any help is appreciated,

 

Niall

Share this post


Link to post
Share on other sites

Don't think so.

 

At the top of every page of the desktop version of the site there is a banner (directly above the menu) that is a different image depending on the page. I did this via the plugin mentioned above. On the mobile version however, I can't change the banners so only one appears throughout the site.

Share this post


Link to post
Share on other sites

It's not working because you have a mobile site and a desktop site.

 

Change to responsive theme and bin the mobile version and the plugin will work.

 

PS: That's just one the problems with the site - there are lots of other things need fixing

Share this post


Link to post
Share on other sites

You don't need a mobile theme, you need a responsive theme. This will adapt to any screen site: small phone, large phone, small tablet, large tablet, laptop, desktop and even a big flatscreen TV.

 

One of the problems is the link to the census on the homepage. It lesds to a 404 page with a depreciation warning.

 

The homepage sidebar is far too long. You end up with a great chunk of whitespace below the two icons. The two icons are anonymous until you hover. But a hover doesn't work on a touchscreen.

 

The menus are all in capitals - makes them difficult to read. And again, hovers don't work on a touchscreen

 

The sidebar has broken links and missing info. Some pages have content hidden under the sidebar.

 

There is a column of social media icons down the left that don't work.

 

All of these things are easily fixed with the right theme and a bit of planning. There are loads more improvements you could make but getting the right theme would be a great start

Share this post


Link to post
Share on other sites

I should have mentioned that the site is currently a work-in-progress and I would get around to sorting out those issues.

 

The site was started in 2006 and regrettably was largely table-based, over time I knew I had to make a major overhaul, but due to the scale of the task I always put it off (the site being a voluntary undertaking also didn't help!). The original site is still up and currently in use, but I'm shamed by it...

 

On the original site's home page I had an interactive map I created using Flash, I intend to recreate it at some point (SVG?) and the white space was a reminder.

 

I kind of like the menu items being in block capitals, I personally prefer the clean shape rather than having letters 'hang' - if this preference makes reading difficult then of course I would change to suit.

 

With a responsive theme would that mean the layout is more or less a template design? I would prefer to work to my own design, is that possible with a responsive theme? Although this website is voluntary, I have dedicated a lot of my time to it over the last decade or so and while it's not perfect I strive for it to be - a very frustrating labour of love!

Share this post


Link to post
Share on other sites

I should have mentioned that the site is currently a work-in-progress and I would get around to sorting out those issues.

 

The site was started in 2006 and regrettably was largely table-based, over time I knew I had to make a major overhaul, but due to the scale of the task I always put it off (the site being a voluntary undertaking also didn't help!). The original site is still up and currently in use, but I'm shamed by it...

 

On the original site's home page I had an interactive map I created using Flash, I intend to recreate it at some point (SVG?) and the white space was a reminder.

 

I kind of like the menu items being in block capitals, I personally prefer the clean shape rather than having letters 'hang' - if this preference makes reading difficult then of course I would change to suit.

 

With a responsive theme would that mean the layout is more or less a template design? I would prefer to work to my own design, is that possible with a responsive theme? Although this website is voluntary, I have dedicated a lot of my time to it over the last decade or so and while it's not perfect I strive for it to be - a very frustrating labour of love!

 

If you want to carry the work out yourself, I recommend downloading a working copy of the site and creating a new template. You can use the existing site as a basis, but to be honest it's probably going to be a lot of work to move the tables out and replace them. The majority of Wordpress templates I've seen are just a mess of PHP and HTML mixed together.

 

It's also going to be in your best interest to get up to speed with modern web development and building responsive sites. I recommend stating at the absolute basics, this roadmap should get you most of the way, but you may feel it's best to watch other videos to expand on what you know.

 

https://teamtreehouse.com/library/how-to-make-a-website

https://frontendmasters.com/courses/responsive-web-design/

https://teamtreehouse.com/library/php-for-wordpress

https://teamtreehouse.com/library/wordpress-theme-development

 

These are paid resources. The Frontend Masters course can be done within the free trial, but I'd keep hold of the Treehouse membership until you're finished because of the amount of HTML, CSS & Wordpress tutorials available to do.

 

If this sounds like a lot to learn, that's because it is. The alternative is to use a pre-made theme, something like https://www.simplethemes.com/wordpress-themes.

Share this post


Link to post
Share on other sites
With a responsive theme would that mean the layout is more or less a template design? I would prefer to work to my own design, is that possible with a responsive theme? Although this website is voluntary, I have dedicated a lot of my time to it over the last decade or so and while it's not perfect I strive for it to be - a very frustrating labour of love!

I build all my own themes and they are all responsive. It takes a while to learn the intircacies but you can build something very fast and light.

 

Most of the responsive components come from the CSS and @media equiries. As long as your theme is structure properly doing the responsive bit isn't that complicated.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • By DonkeyWorx
      We provide a range of cartoon illustration and puzzle services so the main image on the home page is currently a montage of various images representing that. But some important voices are unconvinced and would prefer a single image - either a hero image or a carousel (which I've read no-one bothers to use so had dismissed) what are your thoughts/experience?
       
      Here's the page if you want to see the current solution - http://www.donkeyworx.com/index.shtml - feedback welcome.
       
      TIA.
       
      Paul
    • By Demonolith
      Hi all,
       
      I have an SVG map and would like to have it so that when on a phone if a user taps a region the colour will change and remain that colour until another colour e.g.
       
      Region begins as #ff0000
      When tapped changes to #ffff00
      Stays that colour until another region is tapped
       
      Here is the map (towards the bottom of the page) - excuse how it looks on screens larger than 640px, right now I'm focusing on phones.
       
      And here's my CSS:
      a svg:focus #brackaghnorth { fill: #ff0000; pointer-events: none; } a svg:hover #tievebrack { fill: #ffff00; pointer-events: none; } a svg:hover #tievenameena { fill: #0000ff; pointer-events: none; } a svg:hover #liggins { fill: #ff3366; pointer-events: none; } a svg:hover #ligatraght { fill: #009900; pointer-events: none; } a svg:hover #keerin { fill: #ff00ff; pointer-events: none; } a svg:hover #oaghmonicrory { fill: #ff9900; pointer-events: none; } a svg:hover #teebaneeast { fill: #9933cc; pointer-events: none; } a svg:hover #carnanransy { fill: #ccff00; pointer-events: none; } a svg:hover #crouck { fill: #0033cc; pointer-events: none; } a svg:hover #alwories { fill: #00ffff; pointer-events: none; } a svg:hover #monanameal { fill: #cc0000; pointer-events: none; } a svg:hover #aghascrebagh { fill: #ccffff; pointer-events: none; } a svg:hover #crockanboy { fill: #ff9900; pointer-events: none; } a svg:hover #sheskinshule { fill: #ffff99; pointer-events: none; } a svg:hover #formil { fill: #33ff00; pointer-events: none; } a svg:hover #binnafreaghan { fill: #cc0000; pointer-events: none; } a svg:hover #cashel { fill: #9966ff; } a svg:hover #backan { fill: #00ff00; } a svg:hover #brackaghsouth { fill: #ffff00; } a svg:hover #leaghan { fill: #00ffff; } a svg #brackaghnorth, a svg #tievebrack, a svg #tievenameena, a svg #liggins, a svg #ligatraght, a svg #keerin, a svg #oaghmonicrory, a svg #teebaneeast, a svg #carnanransy, a svg #crouck, a svg #alwories, a svg #monanameal, a svg #aghascrebagh, a svg #crockanboy, a svg #sheskinshule, a svg #formil, a svg #binnafreaghan, a svg #cashel, a svg #backan, a svg #brackaghsouth, a svg #leaghan { transition: 200ms; transition-timing-function: ease-in-out; -webkit-transition: 200ms; -webkit-transition-timing-function: ease-in-out; }
    • By Demonolith
      Hi all,
       
      I created an interactive map using Raphaël JS and although it appears on desktops it doesn't on mobiles - I am using a customised version of the Jetpack mobile theme.
       
      The map appears toward the bottom of this page.
       
      http://greencastleparish.com/wordpress/wp-content/themes/greencastleparish/js/raphael.js
       
      http://greencastleparish.com/wordpress/wp-content/themes/greencastleparish/js/map.js
       
      Can anyone help out please?
    • By skarekrow
      Hi All
      I have a simple e-commerce site built with wordpress, woocommerce and storefront theme.
       
      I am going to be adding hundreds of product images over the coming months so I am looking for recommendations for a plug in to organise the images in the media library.
       
      I seached for a suitable plug in but there are several so wondered if you had a favourite.
       
      Paul
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,535
    • Most Online
      4,970

    Newest Member
    Rose Hale
    Joined
  • Forum Statistics

    • Total Topics
      65,732
    • Total Posts
      455,404
×