I followed a guide to use css to generate beautiful tags on my site, but it seems it is in conflict with the theme, which caused my whole site appearance broken. I am trying to figure why but I have no idea. Could you give me some help?
So, in the next time, we will can't help you more with questions for customization like that - because we can't provide supports like that for all 20k+ customers use this theme. Hope you can understand it.
Hi penci,
I followed a guide to use css to generate beautiful tags on my site, but it seems it is in conflict with the theme, which caused my whole site appearance broken. I am trying to figure why but I have no idea. Could you give me some help?
Cheers,
Julia
Hi Penci, I figured it out by myself.
I added html class .links before every a:before and a:after, and the problem has been fixed, but I do not why this could fix this problem.
CSS CODE: body { padding: 50px; } .links a { display: inline-block; height: 21px; margin: 0 10px 0 0; padding: 0 7px 0 14px; white-space: nowrap; position: relative; background: -moz-linear-gradient(top, #fed970 0%, #febc4a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a)); background: -webkit-linear-gradient(top, #fed970 0%,#febc4a 100%); background: -o-linear-gradient(top, #fed970 0%,#febc4a 100%); background: linear-gradient(to bottom, #fed970 0%,#febc4a 100%); background-color: #FEC95B; color: #963; font: bold 11px/21px Arial, Tahoma, sans-serif; text-decoration: none; text-shadow: 0 1px rgba(255,255,255,0.4); border-top: 1px solid #EDB14A; border-bottom: 1px solid #CE922E; border-right: 1px solid #DCA03B; border-radius: 1px 3px 3px 1px; box-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21); } .links a:before { content: ''; position: absolute; top: 5px; left: -6px; width: 10px; height: 10px; background: -moz-linear-gradient(45deg, #fed970 0%, #febc4a 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fed970), color-stop(100%,#febc4a)); background: -webkit-linear-gradient(-45deg, #fed970 0%,#febc4a 100%); background: -o-linear-gradient(45deg, #fed970 0%,#febc4a 100%); background: linear-gradient(135deg, #fed970 0%,#febc4a 100%); background-color: #FEC95B; border-left: 1px solid #EDB14A; border-bottom: 1px solid #CE922E; border-radius: 0 0 0 2px; box-shadow: inset 1px 0 #FEDB7C, 0 2px 2px -2px rgba(0,0,0,0.33); } .links a:before { -webkit-transform: scale(1, 1.5) rotate(45deg); -moz-transform: scale(1, 1.5) rotate(45deg); -ms-transform: scale(1, 1.5) rotate(45deg); transform: scale(1, 1.5) rotate(45deg); } .links a:after { content: ''; position: absolute; top: 7px; left: 1px; width: 5px; height: 5px; background: #FFF; border-radius: 4px; border: 1px solid #DCA03B; box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.21); } .links a:hover { color: #FFF; text-shadow: -1px -1px 0 rgba(153,102,51,0.3); }Could you give an explanation?
Anyway, no need to take time help me out now!
Hi Penci,
I have got another question.
Could you tell me how to center the post title on my homepage like the photo attached.
Cheers,
Julia
Hi,
1/ Yeah, it shouldn't has the code:
body { padding: 50px; }It should be:
.widget .links a { display: inline-block; height: 21px; margin: 0 10px 0 0; padding: 0 7px 0 14px; white-space: nowrap; position: relative; background: -moz-linear-gradient(top, #fed970 0%, #febc4a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a)); background: -webkit-linear-gradient(top, #fed970 0%,#febc4a 100%); background: -o-linear-gradient(top, #fed970 0%,#febc4a 100%); background: linear-gradient(to bottom, #fed970 0%,#febc4a 100%); background-color: #FEC95B; color: #963; font: bold 11px/21px Arial, Tahoma, sans-serif; text-decoration: none; text-shadow: 0 1px rgba(255,255,255,0.4); border-top: 1px solid #EDB14A; border-bottom: 1px solid #CE922E; border-right: 1px solid #DCA03B; border-radius: 1px 3px 3px 1px; box-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21); } .widget .links a:before { content: ''; position: absolute; top: 5px; left: -6px; width: 10px; height: 10px; background: -moz-linear-gradient(45deg, #fed970 0%, #febc4a 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fed970), color-stop(100%,#febc4a)); background: -webkit-linear-gradient(-45deg, #fed970 0%,#febc4a 100%); background: -o-linear-gradient(45deg, #fed970 0%,#febc4a 100%); background: linear-gradient(135deg, #fed970 0%,#febc4a 100%); background-color: #FEC95B; border-left: 1px solid #EDB14A; border-bottom: 1px solid #CE922E; border-radius: 0 0 0 2px; box-shadow: inset 1px 0 #FEDB7C, 0 2px 2px -2px rgba(0,0,0,0.33); } .widget .links a:before { -webkit-transform: scale(1, 1.5) rotate(45deg); -moz-transform: scale(1, 1.5) rotate(45deg); -ms-transform: scale(1, 1.5) rotate(45deg); transform: scale(1, 1.5) rotate(45deg); } .widget .links a:after { content: ''; position: absolute; top: 7px; left: 1px; width: 5px; height: 5px; background: #FFF; border-radius: 4px; border: 1px solid #DCA03B; box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.21); } .widget .links a:hover { color: #FFF; text-shadow: -1px -1px 0 rgba(153,102,51,0.3); }2/ For center the title, please add more this code to Customize > Custom CSS:
.grid-header-box h2 { text-align: center; }
Also, I see you have too much questions for item customization - we've tried to help you all but it take much time for us.
Please check Envato Support Policy here
The support doesn't include: Item customization
So, in the next time, we will can't help you more with questions for customization like that - because we can't provide supports like that for all 20k+ customers use this theme. Hope you can understand it.
Best Regards,
PenciDesign
Hi Penci,
Thank you very much!
I really appreciated your effort and time!
I will follow the policy next time, and not bother you with these kinds of question again!
Cheers,
Julia