Home Forums Porto Template Need to change font colors

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 1 week, 5 days ago. This post has been viewed 48 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10030893

    ggvillegas
    Participant

    I will be going public with this website soon it looks awesome (Great Work)… just need help with 2 things
    1 the fonts on the revolution slider I will like to change the font color but when I try some other font color on other pages also change… I’m guess I need to add an ID or a Class and how do I do that without upsetting something else, the other
    2) The map has a tag (it looks very professional) using the longitude and latitude and having an API register with google… when going to the contact page it opens up at high altitude (need to zoom in to about 200m) and when using the hand tool to grab and zoom in, the tag jumps…
    As mention the URL is temp https://cerullofire.com/new


    #10030897

    Support2
    Keymaster

    Hello, thanks for your purchase and the kind words.

    1) To change the color of Revolution Slider texts we recommend the inline method with “style”:

    <h1 class="tp-caption font-weight-extra-bold text-color-dark negative-ls-2"
    	data-frames='[{"delay":1000,"speed":2000,"frame":"0","from":"sX:1.5;opacity:0;fb:20px;","to":"o:1;fb:0;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"opacity:0;fb:0;","ease":"Power3.easeInOut"}]'
    	data-x="['left','left','center','center']" data-hoffset="['50','50','0','0']"
    	data-y="center"
    	data-fontsize="['50','50','50','90']"
    	data-lineheight="['55','55','55','95']"
    	data-letterspacing="-1"
    	style="color: #FFF !important;">FIRE PROTECTION</h1>

    For other elements on the page you can create new custom colors on the files (css/custom.css):

    .custom-color-1 {
    	color: #FFF !important;
    }

    Example of HTML usage:

    <h2 class="custom-color-1">Exampel of heading with custom color</h2>

    2) On the map you have some issues on the JS code and the script of google maps. First remove the callback of googlemaps script. Change to:

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdaKUFCMRtRddXfZJvO7cB0kEtD2xr_-s"></script>

    And on the JS script of map settings change to:

    // Map Markers
    var mapMarkers = [{
    	latitude: 40.600279,
    	longitude: -74.280628, 
    	html: "<strong>901 New Brunswick Avenue.<strong> Rahway,</strong><br> New Jersey 07065",//<br><br><a href='#' onclick='mapCenterAt ({latitud: 40.600279, longiture: -74.280628, zoom: 21},
    	icon: {
    		image: "img/pin.png",
    		iconsize: [26, 46],
    		iconanchor: [12, 46]
    	},
    	popup: true
    }];
    
    // Map Initial Location
    var initLatitude = 40.600221;
    var initLongitude = -74.280496;
    
    // Map Extended Settings
    var mapSettings = {
    	controls: {
    		draggable: (($.browser.mobile) ? false : true),
    		panControl: true,
    		zoomControl: true,
    		mapTypeControl: true,
    		scaleControl: true,
    		streetViewControl: true,
    		overviewMapControl: true
    	},
    	scrollwheel: false,
    	markers: mapMarkers,
    	latitude: initLatitude,
    	longitude: initLongitude,
    	zoom: 5
    };
    
    var map = $('#googlemaps').gMap(mapSettings);
    
    // Map text-center At
    var mapCenterAt = function(options, e) {
    	e.preventDefault();
    	$('#googlemaps').gMap("centerAt", options);
    }

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 2 posts - 1 through 2 (of 2 total)