PDA

View Full Version : Ad Listing Button



Godwin Agbavor
October 27, 2017, 08:03 PM
Guys can anyone help me to make the Ad Listing button look in the picture? It looks Bold and Thick, have a wonderful hover.

Viktor
October 30, 2017, 10:24 AM
Hello Godwin,

I don't see any difficulty with the button. If you know css you can create the same button in a minutes. But I cannot see hover for the button.

Godwin Agbavor
October 30, 2017, 01:38 PM
Hello Godwin,

I don't see any difficulty with the button. If you know css you can create the same button in a minutes. But I cannot see hover for the button.

Hello thanks, I saw the button on this website encuentra24.com . Please help me

Godwin Agbavor
October 31, 2017, 12:05 PM
Hello Godwin,

I don't see any difficulty with the button. If you know css you can create the same button in a minutes. But I cannot see hover for the button.

Please help me with this, anyone there?

Mustafa ilker Yonel
October 31, 2017, 12:15 PM
study this


.navbar-header .right-nav .ann-post-ad{
width:250px;
height:70px;
background:#1aac28;
padding:10px;
}

@media (max-width:768px){
.navbar-header .right-nav .ann-post-ad a{
padding-left:0;
font-size:16px;
}
}

.navbar-header .right-nav .ann-post-ad:hover{
background:#33c240;
}

.navbar-header .right-nav .ann-post-ad a{
background:#33c240;
width:100%;
height:100%;
display:block;
box-shadow:rgba(0,0,0,0.05) 1px 1px 3px;
border-radius:6px;
font-size:18px;
text-align:center;
color:#FFF;
padding-top:12px;
padding-left:10px;
position:relative;
}

.navbar-header .right-nav .ann-post-ad a span.icon,.navbar-header .right-nav .ann-post-ad a .lb-data span.lb-close,.lb-data .navbar-header .right-nav .ann-post-ad a span.lb-close,.navbar-header .right-nav .ann-post-ad a .ann-statistic span.graph-container:before,.ann-statistic .navbar-header .right-nav .ann-post-ad a span.graph-container:before,.navbar-header .right-nav .ann-post-ad a .ann-account-sidebar .list-group.list-group-root>span.list-group-item:after,.ann-account-sidebar .navbar-header .right-nav .ann-post-ad a .list-group.list-group-root>span.list-group-item:after,.navbar-header .right-nav .ann-post-ad a .ann-account-sidebar .list-group.list-group-root>.list-group-item.user span.closebar:after,.ann-account-sidebar .list-group.list-group-root>.list-group-item.user .navbar-header .right-nav .ann-post-ad a span.closebar:after,.navbar-header .right-nav .ann-post-ad a span.ann-account-sidebar-opener:after,.navbar-header .right-nav .ann-post-ad a .ann-account-content .start span.visual,.ann-account-content .start .navbar-header .right-nav .ann-post-ad a span.visual{
position:absolute;
left:25px;
top:15px;
}

.navbar-header .right-nav .ann-post-ad a:hover{
text-decoration:none;
background:#1aac28;
}

@media (max-width:1400px){.navbar-header .right-nav .ann-post-ad{
width:220px;
height:50px;
padding:7px;
}

.navbar-header .right-nav .ann-post-ad a{
padding-top:6px;
}

.navbar-header .right-nav .ann-post-ad a span.icon,.navbar-header .right-nav .ann-post-ad a .lb-data span.lb-close,.lb-data .navbar-header .right-nav .ann-post-ad a span.lb-close,.navbar-header .right-nav .ann-post-ad a .ann-statistic span.graph-container:before,.ann-statistic .navbar-header .right-nav .ann-post-ad a span.graph-container:before,.navbar-header .right-nav .ann-post-ad a .ann-account-sidebar .list-group.list-group-root>span.list-group-item:after,.ann-account-sidebar .navbar-header .right-nav .ann-post-ad a .list-group.list-group-root>span.list-group-item:after,.navbar-header .right-nav .ann-post-ad a .ann-account-sidebar .list-group.list-group-root>.list-group-item.user span.closebar:after,.ann-account-sidebar .list-group.list-group-root>.list-group-item.user .navbar-header .right-nav .ann-post-ad a span.closebar:after,.navbar-header .right-nav .ann-post-ad a span.ann-account-sidebar-opener:after,.navbar-header .right-nav .ann-post-ad a .ann-account-content .start span.visual,.ann-account-content .start .navbar-header .right-nav .ann-post-ad a span.visual{
top:10px;
left:15px;
}

}

@media (max-width:991px){.navbar-header .right-nav .ann-post-ad{
width:160px;
}

}

Godwin Agbavor
October 31, 2017, 12:44 PM
Sir where should add this code too ? Please ?

Godwin Agbavor
October 31, 2017, 12:51 PM
study this


.navbar-header .right-nav .ann-post-ad{
width:250px;
height:70px;
background:#1aac28;
padding:10px;
}

@media (max-width:768px){
.navbar-header .right-nav .ann-post-ad a{
padding-left:0;
font-size:16px;
}
}

.navbar-header .right-nav .ann-post-ad:hover{
background:#33c240;
}

.navbar-header .right-nav .ann-post-ad a{
background:#33c240;
width:100%;
height:100%;
display:block;
box-shadow:rgba(0,0,0,0.05) 1px 1px 3px;
border-radius:6px;
font-size:18px;
text-align:center;
color:#FFF;
padding-top:12px;
padding-left:10px;
position:relative;
}

.navbar-header .right-nav .ann-post-ad a span.icon,.navbar-header .right-nav .ann-post-ad a .lb-data span.lb-close,.lb-data .navbar-header .right-nav .ann-post-ad a span.lb-close,.navbar-header .right-nav .ann-post-ad a .ann-statistic span.graph-container:before,.ann-statistic .navbar-header .right-nav .ann-post-ad a span.graph-container:before,.navbar-header .right-nav .ann-post-ad a .ann-account-sidebar .list-group.list-group-root>span.list-group-item:after,.ann-account-sidebar .navbar-header .right-nav .ann-post-ad a .list-group.list-group-root>span.list-group-item:after,.navbar-header .right-nav .ann-post-ad a .ann-account-sidebar .list-group.list-group-root>.list-group-item.user span.closebar:after,.ann-account-sidebar .list-group.list-group-root>.list-group-item.user .navbar-header .right-nav .ann-post-ad a span.closebar:after,.navbar-header .right-nav .ann-post-ad a span.ann-account-sidebar-opener:after,.navbar-header .right-nav .ann-post-ad a .ann-account-content .start span.visual,.ann-account-content .start .navbar-header .right-nav .ann-post-ad a span.visual{
position:absolute;
left:25px;
top:15px;
}

.navbar-header .right-nav .ann-post-ad a:hover{
text-decoration:none;
background:#1aac28;
}

@media (max-width:1400px){.navbar-header .right-nav .ann-post-ad{
width:220px;
height:50px;
padding:7px;
}

.navbar-header .right-nav .ann-post-ad a{
padding-top:6px;
}

.navbar-header .right-nav .ann-post-ad a span.icon,.navbar-header .right-nav .ann-post-ad a .lb-data span.lb-close,.lb-data .navbar-header .right-nav .ann-post-ad a span.lb-close,.navbar-header .right-nav .ann-post-ad a .ann-statistic span.graph-container:before,.ann-statistic .navbar-header .right-nav .ann-post-ad a span.graph-container:before,.navbar-header .right-nav .ann-post-ad a .ann-account-sidebar .list-group.list-group-root>span.list-group-item:after,.ann-account-sidebar .navbar-header .right-nav .ann-post-ad a .list-group.list-group-root>span.list-group-item:after,.navbar-header .right-nav .ann-post-ad a .ann-account-sidebar .list-group.list-group-root>.list-group-item.user span.closebar:after,.ann-account-sidebar .list-group.list-group-root>.list-group-item.user .navbar-header .right-nav .ann-post-ad a span.closebar:after,.navbar-header .right-nav .ann-post-ad a span.ann-account-sidebar-opener:after,.navbar-header .right-nav .ann-post-ad a .ann-account-content .start span.visual,.ann-account-content .start .navbar-header .right-nav .ann-post-ad a span.visual{
top:10px;
left:15px;
}

}

@media (max-width:991px){.navbar-header .right-nav .ann-post-ad{
width:160px;
}

}

I added the codes to style.css but nothing happened

Godwin Agbavor
October 31, 2017, 06:49 PM
I added the codes to style.css but nothing happened


Anyone there to help me with this ?

Godwin Agbavor
November 1, 2017, 02:45 AM
Hello help me with this issue Please

Pete Young
November 1, 2017, 06:21 AM
do you have a link to where the button is and what colours you want ?

Mustafa ilker Yonel
November 1, 2017, 07:11 AM
@Godwin the css i gave you i just extracted from the page you gave

@Pete check encuentra24.com

Pete Young
November 1, 2017, 10:24 AM
it looks ok, like you wanted ? am i missing something ?

Godwin Agbavor
November 1, 2017, 12:31 PM
@Godwin the css i gave you i just extracted from the page you gave

@Pete check encuentra24.com

Ok so how can I do the same button on my site ? Please

Godwin Agbavor
November 1, 2017, 06:33 PM
Guys am still needing this ti resolve please

Pete Young
November 1, 2017, 10:27 PM
Guys am still needing this ti resolve please

yes just send me a link to your site or post it here (or send me to the template trial in flynax that you are using if you want) and I am guessing it is the top login button you want to change? if not tell me what button and I will tell you what part of the code to edit to get get that effect.

keep in mind depending on the button, but the logo part in flynax is translucent setting and part of the main colour scheme and can be edited to some degree but the rest will be fine.

Godwin Agbavor
November 1, 2017, 10:47 PM
@Pete check encuentra24.com, and also am using https://classifieds.demoflynax.com/?template=general_craigslist I dont want to change the position of the ad listing button, if you can help change the position that will be great but I only want to make a button that looks like that on the website i gave you.

Pete Young
November 1, 2017, 10:55 PM
ok the place ad button is above the catorgories on the left yes and you want a bright colour yes ?

https : // yoursite.com/templates/general_craigslist/css/style.css

line 1542

and edit

background: #123456; < to what ever colour you want, you will also need to edit the border colour and the colour option(text) to suit.

the green colour on the other site is #1aac28

Godwin Agbavor
November 1, 2017, 11:09 PM
ok the place ad button is above the catorgories on the left yes and you want a bright colour yes ?

https : // yoursite.com/templates/general_craigslist/css/style.css

line 1542

and edit

background: #123456; < to what ever colour you want, you will also need to edit the border colour and the colour option(text) to suit.

the green colour on the other site is #1aac28

Thanks Sir, I will do this as soon as I got home from work, I will let you know how it goes.

Pete Young
November 2, 2017, 06:38 AM
https://screencast-o-matic.com/watch/cbXn1w2hDi

Godwin I have done a quick demo for you, you can do this to edit just about anything in your template.

select the item you want to edit and right click and select Inspect you can then see the code, and you can in Inspect mode make any edits you want to test any changes, then you will also see the file path and line numbers in the top right if you hover above them.

Once your happy with the changes you can go in and make the edits.

It might be a good idea to load a copy of the craig's list template and rename it to suit and then you can switch between the two while developing the new template, or waort case if you make an error, delete it and start again.

Any dramas yell out.

Godwin Agbavor
November 2, 2017, 10:16 PM
Wow Pete, you are the best man, thanks 1000TX man