rubyannrsls
Forum Replies Created
-
Forum: Fixing WordPress
In reply to: How to create turn effect on images/gallery/portfolioHello Carlota ??
I can’t dig in much deeper to the grid system of your Divi theme. Nevertheless, this code could do the trick for the flipping effect of 8 images. Hope you could make it work ??
Forum: Fixing WordPress
In reply to: How to create turn effect on images/gallery/portfolioHello Carlota ??
I can’t dig in much deeper to the grid system of your Divi theme. Nevertheless, this could do the trick for the flipping effect of 8 images. Hope you could make it work ??
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://cdn.elegantthemes.com/style.css?ver=4.2"> <style> .flip3D { width:200px; height:200px; margin:10px; float:left; } .flip3D > .front { position:absolute; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); background:#ff0000; width:200px; height:200px; border-radius: 10px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D > .back{ position:absolute; -webkit-transform: perspective( 600px ) rotateY( 180deg ); transform: perspective( 600px ) rotateY( 180deg ); background: #ffff00; width:200px; height:200px; border-radius: 10px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .flip3D:hover > .front{ -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .flip3D:hover > .back{ -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); } .flip3D img { width: 100%; height: 100%; border-radius: 10px; } .flip3D span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .outer { width: 80%; margin: 0 auto; } .inner { width: 80% ; margin: 0 auto; display: block; } </style> </head> <body> <div class="outer"> <div class="inner"> <div class="flip3D"> <div class="back"><span>BACK1</span></div> <div class="front"><span>FRONT1</span></div> </div> <div class="flip3D"> <div class="back"><span>BACK2</span></div> <div class="front"><span>FRONT2</span></div> </div> <div class="flip3D"> <div class="back"><span>BACK3</span></div> <div class="front"><span>FRONT3</span></div> </div> <div class="flip3D"> <div class="back"><span>BACK4</span></div> <div class="front"><span>FRONT4</span></div> </div> </div> </div> <div class="outer"> <div class="inner"> <div class="flip3D"> <div class="back"><img src="https://secure.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=48&r=g&d=monsterid"></div> <div class="front"><img src="https://www.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=150&r=g&d=mm"></div> </div> <div class="flip3D"> <div class="back"><img src="https://secure.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=48&r=g&d=monsterid"></div> <div class="front"><img src="https://www.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=150&r=g&d=mm"></div> </div> <div class="flip3D"> <div class="back"><img src="https://secure.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=48&r=g&d=monsterid"></div> <div class="front"><img src="https://www.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=150&r=g&d=mm"></div> </div> <div class="flip3D"> <div class="back"><img src="https://secure.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=48&r=g&d=monsterid"></div> <div class="front"><img src="https://www.gravatar.com/avatar/d0c8b5783d3a10e703abed514dd92c70?s=150&r=g&d=mm"></div> </div> </div> </div> </body> </html>
Forum: Fixing WordPress
In reply to: How to remove the Unwanted titles?No problem Nicholas ??
Forum: Fixing WordPress
In reply to: How to create turn effect on images/gallery/portfolioHi Carlota,
Are you using bootstrap on your website? I think I can lend you a hand on this ??
Forum: Fixing WordPress
In reply to: Logos AquaductTry manually replacing the image on your server ??
Forum: Fixing WordPress
In reply to: How to remove the Unwanted titles?Also, right at the bottom of the page are “Site Admin”, “Log Out”, “Entries RSS”, “Comments RSS” and “www.remarpro.com”
By the look of your site, I think you’re using Twenty Fourteen theme. You can remove it by deleting the Meta on your widgets. On your dashboard, go to appearance->widgets then delete Meta under Primary Sidebar. Hope you make it work.
I noticed there is a black bar on top of my word “Gramercy Park Singapore by City Developement”
It’s your nav’s background. You really want to remove it?
Forum: Fixing WordPress
In reply to: Section Background ColorTry wrapping the h1 and the text under the div with class sub-title in span.
<div class="banner-box"> <span><h1>Jesse Melanson</h1></span> <div class="sub-title"> <span>The Visual Art, Resume & Portfolio <a class="scroll" href="#about"><img src="https://www.mageewp.com/onetone/wp-content/themes/onetone/images/down.png" alt=""> </a></span> </div> </div>
Then add this to your css…
.banner-box .sub-title span { background-color: rgba(0,0,0,0.5); padding: 25px 20px 30px; } .banner-box span { background-color: rgba(0,0,0,0.5); padding: 80px 40px 40px; }
Hope that works ??
Forum: Fixing WordPress
In reply to: Need help linking logo to homepageTry this code ??
<a href="https://shop.darryldaniels.com/offc/" rel="home"><p class="site-title">Shop Darryl Daniels Art</p></a>
Forum: Fixing WordPress
In reply to: Changing Font of WP-Accordian section titlesTry to add this code to your css
span.vc_tta-title-text { font-family: 'Raleway', sans-serif !important; }
if that doesn’t do the trick, add this Google Fonts code inside the head tag in your header.php
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,900italic,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900' rel='stylesheet' type='text/css'>
Forum: Fixing WordPress
In reply to: Changing color of theme header, footer and rest of the site.In your default.css, find and replace #31A3DD with the color you want then change the rgba of;
.carousel-list li { background: rgba(49, 162, 221, 0.8); }
Try this;
#wrapper{ background: #ffffff; } /* header contact info section ***/ .header_section{ background-color:#00cc99; color:#fff; } /** navbar menus ***/ .navigation_menu{ background-color: #fff; border-top:2px solid #00cc99; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus, .dropdown-menu .active a { background-color: #00cc99; } .collapse ul.nav li.current-menu-parent .dropdown-toggle, .collapse ul.nav li.current-menu-item .dropdown-toggle, .navbar-default .navbar-collapse ul.nav li.current-menu-parent .dropdown-toggle,.navbar-default .navbar-collapse ul.nav li.current-menu-item .dropdown-toggle .collapse ul.nav li.current_page_ancestor .dropdown-toggle,.collapse ul.nav li.current_page_ancestor .dropdown-toggle, .navbar-default .navbar-collapse ul.nav li.current_page_ancestor .dropdown-toggle,.navbar-default .navbar-collapse ul.nav li.current_page_ancestor .dropdown-toggle { background-color: #00cc99; box-shadow: 3px 3px 0 rgba(201, 201, 201, 1); color: #fff !important; border-radius:0px; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: #00cc99; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #00cc99; } .dropdown-menu { background-color: rgba(49, 162, 221, 0.9); } /** headings titles css ***/ .enigma_heading_title h3 { border-bottom: 4px solid #00cc99; color: #3b3b3b; } .enigma_heading_title2 h3 { border-bottom: 2px solid #00cc99; color: #3b3b3b; } /** slider css ***/ .carousel-list li { background:rgba(0, 204, 153, 0.8); } /** service section css ***/ .enigma_service_iocn{ border: 4px solid #00cc99; background-color:#00cc99; background-size: 100% 200%; background-image: linear-gradient(to bottom, #00cc99 50%, #fff 50%); } .enigma_service_area:hover .enigma_service_iocn i { color:#00cc99; } .enigma_service_area:hover .enigma_service_iocn{background-color:#ffffff;} .enigma_service_iocn_2 i{ background: #fff; border: 4px solid #00cc99; } .enigma_service_iocn_2 i{ color: #00cc99; background-size: 100% 200%; background-image: linear-gradient(to bottom, #fff 50%, #00cc99 50%); } /****************portfolio css ******************************************************** ********************************************************************************/ .enigma_home_portfolio_showcase .enigma_home_portfolio_showcase_icons a { background-color: #00cc99; border:2px solid #00cc99; color:#fff; } .enigma_home_portfolio_showcase .enigma_home_portfolio_showcase_icons a:hover{ background-color: #ffffff; border:2px solid #00cc99; color:#00cc99; } .enigma_home_portfolio_caption { border-left:1px solid #ccc; border-bottom:4px solid #00cc99; border-right:1px solid #ccc; } .enigma_home_portfolio_caption:hover{ background: #00cc99; } .enigma_home_portfolio_caption:hover h3 a ,.enigma_home_portfolio_caption:hover small{ color: #ffffff; } .img-wrapper:hover .enigma_home_portfolio_caption{ background: #00cc99; border-left:1px solid #00cc99; border-bottom:4px solid #00cc99; border-right:1px solid #00cc99; } .img-wrapper:hover .enigma_home_portfolio_caption h3 a,.img-wrapper:hover .enigma_home_portfolio_caption small{ color: #ffffff; } .enigma_proejct_button a { background-color: #f8504b; color: #FFFFFF; border: 2px solid #00cc99; transition: all 0.4s ease 0s; } .enigma_proejct_button a:hover { background-color: #ffffff; color: #00cc99; border: 2px solid #00cc99; text-decoration:none; } .enigma_carousel-prev, .enigma_carousel-next { background-color: #fff; border: 2px solid #00cc99; } .enigma_carousel-prev:hover, .enigma_carousel-next:hover { background-color: #00cc99; color:#fff; } .enigma_carousel-prev:hover i, .enigma_carousel-next:hover i{ color:#fff; } .enigma_carousel-prev i, .enigma_carousel-next i { color: #00cc99; } /*** project detail ***/ .enigma_portfolio_detail_pagi li a { color: #404040; border:2px solid #00cc99; text-align:center; background-size: 100% 200%; background-image: linear-gradient(to bottom, #00cc99 50%, #ffffff 50%); -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; } .enigma_portfolio_detail_pagi li a:hover { color: #404040; border:2px solid #00cc99; background-position: 0 -100%; } .enigma_portfolio_detail_pagi li a span{ color:#fff; line-height:35px; } .enigma_portfolio_detail_pagi li a:hover span{ color:00cc99; } .enigma-project-detail-sidebar p small { color:#777777; } .enigma-project-detail-sidebar .launch-enigma-project a { color: #ffffff; border: 2px solid #00cc99; background-size: 100% 200%; background-image: linear-gradient(to bottom, #00cc99 50%, #ffffff 50%); -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; } .enigma-project-detail-sidebar .launch-enigma-project a:hover { background-color: #ffffff; color: #00cc99; border: 2px solid #00cc99; background-position: 0 -100%; } /** gallery css **/ .enigma_gallery_showcase .enigma_gallery_showcase_icons a { background-color: #00cc99; border:2px solid #00cc99; color:#fff; } .enigma_gallery_showcase .enigma_gallery_showcase_icons a:hover{ background-color: #ffffff; border:2px solid #00cc99; color:#00cc99; } /**************** blog css ******************************************************** ********************************************************************************/ /** blog thumbnail css **/ .enigma_blog_thumb_wrapper{ background:#fff; border-bottom: 5px solid #00cc99; box-shadow: 0 0 6px rgba(0,0,0,.7); } .enigma_blog_thumb_wrapper h2 a{ color:#00cc99; transition: all 0.4s ease 0s; } .enigma_blog_thumb_wrapper h2:hover a{ color:#00cc99; } .enigma_blog_thumb_date li i{ color: #00cc99; } .enigma_tags a ,.enigma_cats a{ background-size: 100% 200%; background-color:#edf0f2; background-image: linear-gradient(to bottom, #edf0f2 50%, #00cc99 50%); } .enigma_tags a:hover , .enigma_cats a:hover{ color:#fff; background-position: 0 -100%; background-color:#00cc99; } .enigma_tags a i ,.enigma_cats a i{ color:#00cc99; } .enigma_tags a:hover i ,.enigma_cats a:hover i{ color:#fff; } .enigma_blog_thumb_wrapper span a i{ color: #00cc99; } .enigma_blog_thumb_wrapper span a { color:#555; }.enigma_blog_thumb_footer{ padding-top:20px; padding-bottom:10px; border-top:3px solid #f5f5f5; } .enigma_blog_read_btn{ border: 2px solid #00cc99; background-size: 100% 200%; background-color:#00cc99; background-image: linear-gradient(to bottom, #00cc99 50%, #fff 50%); } .enigma_blog_read_btn i { margin-right:5px; } .enigma_blog_read_btn:hover{ background-position: 0 -100%; background-color:#ffffff; color: #00cc99; } .enigma_blog_read_btn a{color:#ffffff;} .enigma_blog_thumb_wrapper_showcase .enigma_blog_thumb_wrapper_showcase_icons a { background-color: #00cc99; color: #fff; -webkit-transition: all .25s ease-in; -moz-transition: all .25s ease-in; -o-transition: all .25s ease-in; transition: all .25s ease-in; } .enigma_blog_thumb_wrapper_showcase .enigma_blog_thumb_wrapper_showcase_icons a:hover{ background-color: #ffffff; border: 2px solid #00cc99; color: #00cc99; } /********* Blog Full width css ********/ .enigma_post_date { background: #00cc99; color: #ffffff; } .enigma_blog_comment:hover i, .enigma_blog_comment:hover h6{ color:#00cc99; } .enigma_fuul_blog_detail_padding h2 a ,.enigma_fuul_blog_detail_padding h2{ color:#00cc99; } .enigma_fuul_blog_detail_padding h2 a:hover{ color:#00cc99; } /*** blog sidebar css **/ .enigma_recent_widget_post h3 a { color:#00cc99; } .enigma_sidebar_widget { border-left: 3px solid #00cc99; border-right: 3px solid #00cc99; border-bottom: 3px solid #00cc99; background-color:#ffffff; } .enigma_sidebar_widget_title{ background:#00cc99; } .enigma_sidebar_link p a:hover , .enigma_sidebar_widget ul li a:hover { color: #00cc99; } .enigma_widget_tags a , .tagcloud a { background-size: 100% 200%; background-color:#edf0f2; background-image: linear-gradient(to bottom, #edf0f2 50%, #00cc99 50%); } .enigma_widget_tags a:hover , .tagcloud a:hover { border: 1px solid #00cc99; background-color:#00cc99; background-position: 0 -100%; color: #ffffff; } /** blog detail **/ .enigma_author_detail_wrapper{ background: #00cc99; padding:15px; margin-bottom:40px; } .enigma_author_detail_wrapper{ border-left:2px solid #00cc99; } /** blog form input css **/ .reply a { color: #00cc99; } .enigma_con_input_control:focus, .enigma_con_textarea_control:focus, .enigma_contact_input_control:focus, .enigma_contact_textarea_control:focus { border-color: #00cc99; -webkit-box-shadow: inset 0 0px 0px #00cc99, 0 0 5px #00cc99; box-shadow: inset 0 0px 0px #00cc99, 0 0 5px #00cc99; } .enigma_send_button , #enigma_send_button{ border-color: #00cc99; color: #6a6a6a; background-color:#ffffff; background-size: 100% 200%; background-image: linear-gradient(to bottom, #fff 50%, #00cc99 50%); -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; } .enigma_send_button:hover ,#enigma_send_button:hover{ background-position: 0 -100%; border: 2px solid #00cc99; color: #ffffff; background-color:#00cc99; } .enigma_blog_pagination { background-color: #FFFFFF; } .enigma_blog_pagi a { border: 1px solid #dbdbdb !important; background-color: #ffffff; background-size: 100% 200%; background-image: linear-gradient(to bottom, #fff 50%, #00cc99 50%); -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; color: #777777; } .enigma_blog_pagi a:hover, .enigma_blog_pagi a.active { background-position: 0 -100%; color: #ffffff; } /****** Testimonial css ******************************************* ****************************************************************/ .enigma_testimonial_area i{ color:#00cc99; } .enigma_testimonial_area img{ border: 10px solid #00cc99; } .pager a{ background: #fff; border: 2px solid #00cc99; } .pager a.selected{ background: #00cc99; border: 2px solid #00cc99; } /**** Client Css ************************************************* ****************************************************************/ .enigma_client_wrapper:hover { border: 4px solid #00cc99; } .enigma_client_prev, .enigma_client_next { background-color: #fff; border: 2px solid #00cc99; } .enigma_client_prev:hover, .enigma_client_next:hover { background-color: #00cc99; color:#fff; } .enigma_client_prev:hover i, .enigma_client_next:hover i{ color:#fff; } .enigma_carousel-prev i, .enigma_carousel-next i { color: #00cc99; } /**** About us page Css ************************************************* ****************************************************************/ .enigma_team_showcase .enigma_team_showcase_icons a { background-color: #00cc99; border:2px solid #00cc99; color:#fff; } .enigma_team_showcase .enigma_team_showcase_icons a:hover{ background-color: #ffffff; border:2px solid #00cc99; color:#00cc99; } .enigma_team_caption:hover{ background: #00cc99; } .enigma_team_caption:hover h3 a ,.enigma_team_caption:hover small{ color: #ffffff; } .enigma_team_wrapper:hover .enigma_team_caption{ background: #00cc99; } .enigma_team_wrapper:hover .enigma_team_caption h3 ,.enigma_team_wrapper:hover .enigma_team_caption small{ color: #ffffff; } /***** Call Out Section ***************************************************************** ***************************************************************************************/ .enigma_callout_area { background-color: #00cc99; } /***** Footer Area Css ***************************************************************** ***************************************************************************************/ .enigma_footer_area{ background: #00cc99; border-top: 0px solid #6B6B6B; } /***** Contact Info Css ***************************************************************** ***************************************************************************************/ .enigma_contact_info li .desc { color: #00cc99; } /***** Shortcode Css ***************************************************************** ***************************************************************************************/ /*Dropcaps Styles*/ .enigma_dropcape_square span { background-color: #00cc99; color: #FFFFFF; } .enigma_dropcape_simple span { color: #00cc99; } .enigma_dropcape_circle span { background-color: #00cc99; color: #FFFFFF; } /*** breadcum style css **/ .breadcrumb li a { color: #00cc99 !important; } /** progress bar or nav button css */ .progress-bar { background-color: #00cc99 !important; } .btn-search{ background:#00cc99 !important; } .nav-pills > li > a{ border: 3px solid #00cc99 !important; background-size: 100% 200%; background-image: linear-gradient(to bottom, #fff 50%, #00cc99 50%) !important; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-image: linear-gradient(to bottom, #00cc99 50%, #00cc99 50%) !important; background-color:#00cc99; } .nav-stacked > li > a { border: 3px solid #00cc99 !important; background-size: 100% 200%; background-image: linear-gradient(to bottom, #fff 50%, #00cc99 50%) !important; } .nav-stacked > li.active > a, .nav-stacked > li.active > a:hover, .nav-stacked > li.active > a:focus { background-image: linear-gradient(to bottom, #00cc99 50%, #00cc99 50%) !important; background-color:#00cc99; } .navbar-toggle { background-color: #00cc99 !important; border: 1px solid #00cc99 !important; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #00cc99 !important; } .enigma_blockquote_section blockquote { border-left: 5px solid #00cc99 ; } #wp-calendar caption { background-color: #00cc99; color: #ffffff; padding: 10px; } #wp-calendar thead tr th { text-align: center; } table th { border: 1px solid #dddddd; padding: 8px; line-height: 20px; text-align: center; vertical-align: top; } table td { border: 1px solid #dddddd; padding: 8px; line-height: 20px; text-align: center; vertical-align: top; } table td { border: 1px solid #dddddd; padding: 8px; line-height: 20px; text-align: center; vertical-align: top; } #wp-calendar tbody tr td { text-align: center; } .enigma_footer_widget_column ul li a ,.enigma_footer_widget_column ul#recentcomments li {color: #f2f2f2;} .enigma_footer_widget_column ul li a:hover{color: #00cc99;} .enigma_callout_area a:hover{background-color:#393c40;} ul .social li .facebook a:hover ,ul .social li .twitter a:hover,ul .social li .linkedin a:hover ,ul .social li .youtube a:hover {background-color:#34495e;} .enigma_blog_pagi a:hover, .enigma_blog_pagi a.active { background-color: #00cc99; color: white; }
Forum: Fixing WordPress
In reply to: Nav bar button borderThis code could make them go away ??
nav ul a, nav ul a:link, nav ul a:visited { background: none !important; }
Forum: Fixing WordPress
In reply to: Attempting to create an image map with a clickable phone numberForum: Fixing WordPress
In reply to: Changing Font of WP-Accordian section titlesMaybe Google Fonts can help you. Add this code inside the head tag in your header.php
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,900italic,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900' rel='stylesheet' type='text/css'>
Then add this to the element that’s controlling your section titles
font-family: 'Raleway', sans-serif;
For example, in the Twenty Sixteen wordpress theme, section titles (considering you mean post title) are controlled by an h2 with a class of entry-title. So, adding this code will change its font.
h2.entry-title { font-family: 'Raleway', sans-serif; }
Hope you got it ??
Forum: Fixing WordPress
In reply to: Remove top space and bar from pages.Great! Good luck to your css journey ??
Forum: Fixing WordPress
In reply to: Remove top space and bar from pages.Oops! I forgot something. Here’s the modified code ??
header#masthead, header.entry-header { margin-bottom: 0 !important; border: none !important; }
By the way, where did you learn to code CSS?
Hmmm, that’s hard to tell because it’s way too many to mention. There’s a lot of tutorial in the web, try watching tutorial in youtube about css ??