Editing my Header
-
very unfamiliar with editing the header and footer sections – Is there an easy way to, visually, move our icon closer to the text, change the text font, etc?
here’s our site: https://www.chicagometalsupply.com
and here’s where I am thinking I would edit;
Theme Header (header.php)
-
HEADER –
For your logo icon, you can move it’s position by modifying the float property and/or playing with the margin properties.
To move your logo icon closer to the header text, you could try something like
#logo a img { float: right; }You would add this code and all other css modifications to your custom CSS stylesheet.
As for changing the text color of your header, ie “Chicago Metal Supply”… well, you have this on your site as an image. So in order to change the font color from blue to, say, red… you will need to create a whole new image (or modify the original image if possible) with your image editing software and then upload the new image with the new text color to your site. I emphasize – you only have to do it this way because the header text you are using is actually just an image.
FOOTER –
To change the footer text color… for instance, if you would like to change the text color of your footer copyright from white to red, you would do something like
.absolute-footer .right { color: red; }When making css modifications, you just need to target which element you want to modify, and then use the appropriate CSS code to make the modifications. If you are using Chrome browser for instance, you can simply right click on an element you want to change and then click “Inspect” to open the browser inspector which will allow you to search each element’s CSS classes and properties to figure out what to target and modify.
You can try something like this and put it the div where the rest of the social icons are. There are other ways to do it (for instance, uploading your own custom IG icon image and setting the code so that it links to your IG page on click) but you could try this first and see if it’s what you’re looking for.
I have the code – from the Editor – could you tell me where to paste it? I don’t see anything in the footer.php that mentions Google+, LinkedIn, etc. here’s the code I generated:
<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-32 { width: 32px; height: 32px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-32.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-32 { background-image: url(//badges.instagram.com/static/images/[email protected]); background-size: 60px 178px; } }</style>
<style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-32 { width: 32px; height: 32px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-32.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-32 { background-image: url(//badges.instagram.com/static/images/[email protected]); background-size: 60px 178px; } }</style>
You may want to regenerate the code for your badge before you use it – what you posted here wasn’t working.
Anyways, I am going to give you two options to try, either of which will probably require you to do some css edits to get it in the right position, but should work fine.
To do either of these two methods, you will need to head to your customizer view. Go to “Appearance” then click “Customize”.
Once in customizer view, click on Widgets tab. Your theme should have an area for footer widgets with titles such as “Footer Top Column One”, “Footer Bottom Column Four” etc (just look for the appropriate footer section).
Option 1)
I see that you are using Jetpack. The plugin comes with a social widget you can use to easily add in all of your social pages. I am not really sure if this is the widget you’re already using, but you can check.
Click on your footer area widget tab, then click Add a Widget. Scroll through and see if you have a widget called “Social Media Icons (Jetpack)”. Play with that and see what you think. If it’s not showing in your widget list, you will need to go to the Jetpack plugin settings to enable the widget.
Option 2)
With this option you can insert the Instagram badge. Same steps as above – click on the appropriate footer area widget tab then click Add a Widget. Now you will search for the “Text” widget instead of that Jetpack widget. Add it to your footer area widget tab.
Open the text widget – this is where you will paste that code you generated for instagram.
You will want to create a div so you can style it with css. What you insert into the text area will end up looking something like this:
<div id="instasocial"> <style>.ig-b- { display: inline-block; } .ig-b- img { visibility: hidden; } .ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; } .ig-b-32 { width: 32px; height: 32px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-32.png) no-repeat 0 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min–moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .ig-b-32 { background-image: url(//badges.instagram.com/static/images/[email protected]); background-size: 60px 178px; } }</style> </div>As you see, all I did was add a <div id=”YOURDIV”> tag at the top and a </div> tag at the bottom. Paste your generated code between these two tags. Let the customizer update to show a preview and you should then see your badge pop up somewhere in the footer (whichever widget area you selected).
You will then target the instasocial div (or whatever you choose to name it) with css in your stylesheet to modify it’s properties.
- The topic ‘Editing my Header’ is closed to new replies.