Community Forums › Forums › Archived Forums › Design Tips and Tricks › Fabric Theme – Adding a Title Image
Tagged: Fabric; header image; newbie
- This topic has 6 replies, 2 voices, and was last updated 9 years, 10 months ago by miholmes.
-
AuthorPosts
-
June 18, 2014 at 8:30 am #110354miholmesMember
Good Morning,
So I will just go ahead and state right away that I'm new to this. 🙂 If if I sound like I don' t know what I'm doing...it's probably because I don't. 🙂
With that said I have installed the fabric theme and have everything up and working with one little issue. I have an image I would like to have to the left of my title.
I have looked on the boards here and tried a few of the suggestions....and I'm CLOSE! But no cigar yet!
My site is: http://quilterguy.com/
The image I would like to the left side is here:
http://www.quilterguy.com/wp-content/uploads/2014/06/smallfinal.pngUnfortunately I need to get the image nudged over to the left a but more, and then center the title.
Here is what my title code looks like atm:
}
#title {
font-family: "p22-underground-sc", serif;
font-weight: normal;
font-size: 100px;
line-height: 60px;
margin: 0 0 5px;
text-shadow: #fff 1px 1px;
}.header-full-width #title {
text-align: center;
}#title a,
#title a:hover {
color: #8f8d85;
text-decoration: none;
background-image:url(http://www.quilterguy.com/wp-content/uploads/2014/06/smallfinal.png);
background-repeat:no-repeat;
position:center left;
padding-left: 325px;
}I'm hoping someone could look at this and think, OOOOO easy just change x-y-z or all of them. I appriciate you taking time out of your day to take a look. 🙂
http://quilterguy.com/June 18, 2014 at 8:43 am #110358miholmesMemberIn a perfect world I would love to have the image off to the left outside of the title area etc....but that is beyond me already 😉
June 18, 2014 at 8:51 am #110360emasaiParticipantThat image is huge for a header. So I did the following
#title a,
#title a:hover {
color: #8f8d85;
text-decoration: none;
display: block;
text-align: center;
}
#title area{
background-image: url(http://www.quilterguy.com/wp-content/uploads/2014/06/smallfinal.png);
background-repeat: no-repeat;
background-size: contain;
height: auto;
padding: 40px 0 0;
margin: 10px 0 0;
}
Hope I haven't forgotten anything!
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comJune 18, 2014 at 9:11 am #110361miholmesMemberGreat I have made those changes, but I don't seem to see the image at all?
Here is what my code reads as now:#header { margin: 0 auto; min-height: 80px; overflow: hidden; width: 960px; } #title area{ background-image:url(http://www.quilterguy.com/wp-content/uploads/2014/06/smallfinal.png); background-repeat: no-repeat; background-size: contain; height: auto; padding: 40px 0 0; margin: 10px 0 0; } #title { font-family: "p22-underground-sc", serif; font-weight: normal; font-size: 100px; line-height: 60px; margin: 0 0 5px; text-shadow: #fff 1px 1px; } .header-full-width #title { text-align: center; } #title a, #title a:hover { color: #8f8d85; text-decoration: none; display: block; text-align: center; }
June 18, 2014 at 9:15 am #110363miholmesMemberP.S. Thank you for your quick reply, and taking the time to help me. 🙂
~Michael
June 18, 2014 at 9:32 am #110364emasaiParticipantSorry, my mistake, I left out a hyphen. It should be #title-area
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comJune 18, 2014 at 9:53 am #110368miholmesMemberPerfect THANK YOU!!! 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.