- This topic has 18 replies, 3 voices, and was last updated 6 years, 10 months ago by Tom.
-
AuthorPosts
-
June 20, 2017 at 7:38 am #336241Harris
Hello,
I’ve got this html
<span>TEXT</span>and that css
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#6680B9 0%, 86c2db 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: “”;
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid 86c2db;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid 86c2db;
}
.ribbon span::after {
content: “”;
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid 86c2db;
border-bottom: 3px solid transparent;
border-top: 3px solid 86c2db;
}and I want to add the ribbon appearing on the top right corner of my homepage, overriding anything else.
I guess I can add the CSS with simple CSS.
How and where do I have to add the html?
Thanks
HarrisJune 20, 2017 at 8:08 am #336261LeoStaffCustomer SupportHi there,
I think you can try the top bar widget:
https://docs.generatepress.com/article/top-bar-widget-area/Or before header hook and make it float right:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/Let me know if this works.
June 20, 2017 at 8:19 am #336271Harrisedited
June 20, 2017 at 8:52 am #336287HarrisI managed to place it at the top bar as a widget.
Now I am trying to move it down either to the navigation top right or to the content top right.
The problem I have now is that into whatever hook I try to put it it still shows in the same place.
On the top right of the top bar (I have removed the widget that was placing it there)I tried almost all header and content hooks.
Have in mind that I am not using header but I am using navigation instead.
Please help
Thanks
June 20, 2017 at 12:21 pm #336420LeoStaffCustomer SupportCan you provide a link to your site?
June 20, 2017 at 12:31 pm #336429HarrisSame as in the other ticket ๐
Juse added it back so you can see it.Its in the inside content container hook so I assume it should show in the top right corner of the moving photo
June 20, 2017 at 11:56 pm #336666TomLead DeveloperLead DeveloperTry adding this:
.site-main { position: relative; }
June 21, 2017 at 12:22 am #336680HarrisThanks! It is placed properly now.
Is there some way I can have it only in the homepage?
June 21, 2017 at 9:32 am #336950TomLead DeveloperLead DeveloperHow/where are you currently adding the HTML element?
June 21, 2017 at 9:36 am #336955HarrisHello!
Its in the “Inside Content Container” hook.
Code is:<div class="ribbon-wrapper-green"><div class="ribbon-green">MYKONOS</div></div>
June 21, 2017 at 10:55 am #336993LeoStaffCustomer SupportTry this in the hook:
<?php if ( is_front_page() ) : ?> <div class="ribbon-wrapper-green"> <div class="ribbon-green">MYKONOS</div> </div> <?php endif; ?>
June 21, 2017 at 11:03 am #337000HarrisHello,
This makes all site’s pages loading nothing but header (navigation)
June 21, 2017 at 11:05 am #337001LeoStaffCustomer SupportDid you check Execute PHP?
June 21, 2017 at 11:10 am #337005HarrisYes. Otherwise it wouldn’t break the site ๐
June 21, 2017 at 11:10 am #337007LeoStaffCustomer SupportSorry had a typo before. Edited the code. Give it another shot?
-
AuthorPosts
- You must be logged in to reply to this topic.