Hey Oscasr,

You can have an unlimited number of portfolios but when switching themes with an already developed site based on another theme – there’s going to be work involved and I wouldn’t recommend doing it live.

Cheers

Thanks, I like the work but how do I do it so it does’nt show live? I know that when you switch themes it goes live, but can I work with it in back office somehow?

Hey IVSIVRIS!

Add this into the Custom CSS box located in your Salient Options panel:

@media only screen and (min-width : 1px) and (max-width : 690px) {
    .container, div.slider-nav {
         max-width: 85%!important;
    }
}

Cheers

Thanks for the reply. Much better now! And would it be able to make the font-size for mobile devices only bigger than desktop? Because using the typography section in admin menu means overall bigger.

I have another question, the Google Font ‘Noto Sans / Serif’ isn’t available from admin panel, can I still add them?

Hey again Joe!

Use this in your Custom CSS box located in your Salient Options panel:

body .swiper-slide .content h2 {
   color: #ff0000!important;
}
body .swiper-slide .content p  {
   color: #ff7800!important;
}

Cheers

ok, perfect… but what do I have to do to change any others now…something similar underneath that code perhaps?

Oh ya, what about adding the transparent back ground to the “header” text like the caption part has?

Thanks again for the support…didn’t think it would be this difficult to make minor changes in font.

code works but changes all slides the same?. Need to be able to separate this as different slides have different backgrounds that require the fonts to have different colors in order to show up well and readable.

You’d think this could/would/should be an option in the settings rather than having to resort to code it ourselves. I’m not (as I’m sure many aren’t) that tech savvy to be doing do this.

Hey again Joe,

1. If you need to make a custom color for a specific slide enter a class into the extra class name in your slide http://i.imgur.com/TSVwQZB.png such as

my-cool-color

then back in your custom css box change the rules to be:

body .swiper-slide.my-cool-color .content h2 {
   color: #ff0000!important;
}
body .swiper-slide.my-cool-color .content p  {
   color: #ff7800!important;
}

A color picker for the slider will most likely be added, but one could argue there should be a color picker for any element on the site if they didn’t know how to change it with css. There’s tons of color pickers already available for various elements and more typography control than most themes have – but if you ever don’t know how to change something, I’ll gladly give you the css myself. I’ve never denied a buyer custom css as long as it’s within reason

2. Here’s another mod for your transparent BG behind the heading:

.swiper-slide .content h2 {
       padding: 0px;
    display: inline;
    position: relative;
    left: 10px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
    -o-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
    line-height: 45px;
}

MUCH appreciated! I commend your willingness to help us non-techies out. Thanks for the photo illustration (visual reference)...this also helps cut to the chase. I’ll give this all a try over the weekend.

Thanks again!

opps…hold on, how is the code you demonstrated for the “custom css box” tie in with that particular class that was put in to that particular slider? Shouldn’t the “class” be included somewhere in the code to distinguish it from others that I will use in the same manner? Not sure if I’m missing something here or…

Remember, your dealing with someone NOT experienced in coding. Illustrations may be necessary!...lol.

Hey again!

When you add the class into the box for that specific slide then it will be given to that slide only on the front which is how this snippet:

body .swiper-slide.my-cool-color .content h2 {
   color: #ff0000!important;
}
body .swiper-slide.my-cool-color .content p  {
   color: #ff7800!important;
}

will only target that specific slide out of all. It’s the

.swiper-slide.my-cool-color

in the rule that ties it to the class you added in the input field

Outstanding! Thanks again for the quick response.

Incidentally, can you have a look at my Ticket #159304? Just want t make sure all this work is not for nothing. Cheers…Have a great weekend!

Will be with you on there soon!

The code works great but I have a little issue where the transparencies are now overlapping. What do you suggest give this more separation? Example: http://collinssafety.ca/art/img1.png

Is there also a way to move this whole text/button combo to different areas on the slide?...Like say lower left. Having this option would be useful on other slides as well.

Thanks again!

Hey,

1. Try changing it to this:

.swiper-slide .content h2 {
padding: 0px;
display: inline;
position: relative;
left: 10px;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
-o-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
line-height: 45px;
top: -16px!important;
}

2. Right now you can move it to general areas on the x and y axis, but if you need to move it more precisely in position it would required custom css.

Cheers

Hey Nathan!

Instead of using a background image, (assuming you’re on Salient 3.0+) use a row with the full width content type and place an image element inside of it. This will allow it to adjust the width of the screen perfectly

Cheers

Thanks for the reply. The only thing that may not work with that solution is that I’m overlaying text and other items on top of the image. If I start a new row with a image element, can I still put text and videos on top of it?

Thanks for the reply. The only thing that may not work with that solution is that I’m overlaying text and other items on top of the image. If I start a new row with a image element, can I still put text and videos on top of it?

Thanks for the reply. The only thing that may not work with that solution is that I’m overlaying text and other items on top of the image. If I start a new row with a image element, can I still put text and videos on top of it?

You’re welcome

That would be a problem then – I didn’t know you were overlaying content. In this case you would indeed have to use the background option, but the size of that image on mobile is only going to be determined by what content you have in the row so controlling it to ensure the sides are not cropped would be pretty difficult.

It’s only for the very top of the page. Would there be a way to put the image at the top of the page, outside of any rows and then tell the first few rows to have a transparent background?

Try giving the row a class such as “contained-bg” and then adding this into your Custom CSS box located in your Salient Options panel:

@media only screen and (min-width: 1px) and (max-width: 1000px) {
    .contained-bg {
      background-size: contain!important;
   }
}

Tried adding contained-bg to the extra class name box at the bottom of the row options and then the code you provided in the box that pops up when I click that </> CSS button at the top right of the virtual composer.

No change. Did I do it right?

Could I grab a URL to that page to see if it’s getting correctly applied?

Cheers

oh, i think i got it. thank you!!

Ok, I just about have it working, but I now notice that the background image is blurry until I resize the window. It’s then clear until I let go of the mouse button while resizing at which point it becomes just slightly blurry again. So weird. Any ideas?

Here’s the site I’m working on: http://helloindustry.com/matter/

Hey again!

I actually can’t see the issue you’re referring to – what browser are you checking in?

Safari – most updates version of everything on a macbook air.

It’s subtle. Try resizing the page, but before you let go of the mouse button, look closely at the girl’s hair detail. Then let go and watch it immediately become more blurry. Really annoying!

Hey – I’ve now checked on Safari on my PC & Mac but unfortunately couldn’t see it still. I can say that this behavior is definitely not happening on PC – but the reason I might not be able to see it on my mac is because it’s a retina display. Is any case it’s probably just because safari is not as good as other browser with image resizing. Maybe you should consider removing the background-size: cover like you’ve done on the home page if Safari is more important in your case

Cheers!

I just tried Chrome and it didn’t happen. Weird!

Here’s another question: is there a way to completely get rid of the header? I removed some code from the header.php file but still have a little grey space of a few pixels at the top of the screen. The space gets bigger if you view it on an iPhone or just drag the desktop window to be narrower. Ideas?

Yes, just paste this into the Custom CSS box located in your Salient Options panel:

#header-outer {
   display: none!important;
}

worked perfect. thanks!

You’re welcome