I’m currently using the Houdini stack (in a very basic way) on my website, to include some keywords and phrases on each page of the site. I want to include a bunch of social media icons and other company logos in the same footer area. Here’s the site as it stands:
And the kind of thing I’m looking to do can be seen in the footer/lower area of the home page of the following web site:
I’ve tried using a multi column responsive stack inside the Houdini stack, inserting image stacks one per column, then dropping the pngs into the image cells, but the icons all jumble and re-size when viewing on different devices.
If anyone can give me a pointer to the best way of doing this it would be massively appreciated.
BTW - my daughter’s hamster has more coding knowledge than I do, so any suggestions along the CSS/code route need to be very clearly explained!
Hi Rob. Sadly, these are logos from various organisations involved in the wedding photography industry, so not icons. I can get them as pngs or jpegs at reasonable size.
Yup that would work, but I want to avoid the acres of white space you’re seeing at the moment. I’m sure there’s some code I could use, but see OP about hamsters.
The theme is Legacy from Michael David, if that helps at all.
You’ll need to replace the addresses with the social media address toy want to link to, and change the icons to the services you want to reference, but apart from that it’ll work.
And have a quick look at the instructions. Legacy supports four EC areas and it may be that one of them sits beneath the main text and the footer, making it a good fit for your company logos.
Just drag the Extra Content stack out onto your page - doesn’t matter where - and then drop a text stack into it. Then change the setting - there’s only one - to 2 and preview. See where the text appears. Then do the same by changing it to 3, then 4, then 5. See f one of them is placed just above the footer. If it is, then that could be a place for your logos and we can move on to the next step.
OK, so I downloaded the EC stack and got it installed OK. Looking at the different EC areas, 1 appears to sit just below the header and the other 4 sit below the footer. I can contact Michael David to see if they can allow me to alter the position of one of the EC areas to sit above the footer. However, this may allow me to get what I want in terms of the logos.
I tried pasting your code as instructed, but no icons appeared, although the standard copyright phrase was gone. I looked at the theme tutorial, and Michael David do offer some guidance in this area, although their code differs slightly from yours. I’m wondering if they use different nomenclature: for instance, your reference <i class=> in your code, whereas they refer to <a class=>. Here’s a link to their tutorial page:
If you scroll to the bottom you’ll see where they give instructions on using the built-in sm icons.
Not sure where I go from here? Thanks for all your help so far and please don’t spend time on this; am more than happy to go back to Michael David, as their online support is pretty good, but if there is something you spot I’m doing wrong that doesn’t involve huge amounts of your time I’d be grateful for any pointers.
Rob, apologies for late reply - had to do some paid work…
Have been playing with your code and have successfully managed to work out how to insert spaces between the icons, and to ‘guess’ the code for Instagram.
Couple of follow ups:
Is there any way to make the icons larger?
And, is there a ‘dictionary’ or guide as to the code names for different icons? I want to use the icon for Google+ rather than just Google. Have tried a number of permutations but can only seem to get the standard Google ‘G’.
Wow! Thanks Joe, especially for going to the trouble of working up a visual for me!!
Not fully conversant with partials but it certainly looks like a good approach. Will have a dig into some tutorial stuff and see what I can come up with.
