Public Forums 71,145 posts

[victor_ncr Friend victor_ncrJoin date: April 2014Posts: 10Downloads:0Uploads:1]

#196874

Hi Everyone

I download the free template Purity iii, now i want to change the slideshow to full screen.
I tried several ways according the history Threads, none of them works.

I really want to know how the change the Slideshow width and height,background color, etc.

I think the best solution is create at custom.css for Slideshow format, but i can’t find any documentation for that..Please help.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#531461

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as temporarily set “Optimize CSS” to “Off” within your Template Manager–General settings

[victor_ncr Friend victor_ncrJoin date: April 2014Posts: 10Downloads:0Uploads:1]

#531463

Thank you for reply, i install the webserver at local, so can’t share via internet.
And i had set Optimize CSS” to “Off”

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#531465

<em>@victor_ncr 422454 wrote:</em><blockquote>Thank you for reply, i install the webserver at local, so can’t share via internet.
And i had set Optimize CSS” to “Off”</blockquote>
Unfortunately, we need to be able to access the site online to be able to inspect the necessary code to modify to achieve the result you’re looking for.

[victor_ncr Friend victor_ncrJoin date: April 2014Posts: 10Downloads:0Uploads:1]

#531468

Can you show me any documentation or idea how to change the slideshow default width at purity iii？ I think it’s a common request, i can do more research according your idea..

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#531469

You can, of course, try to inspect and play around with the relative CSS files yourself using an online web development tool such as .

You can use Firebug with the Firefox browser viewing your localhost site.

[victor_ncr Friend victor_ncrJoin date: April 2014Posts: 10Downloads:0Uploads:1]

#531474

Hi Tomc

Is that possible for you to tell me the Slideshow size parameter location at LESS folder?
I can’t find it, is that locate at “variables.less” ???

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#531475

Try adding this to your custom.css file:


.container {
width: 100%;
}

If you don’t have a custom.css file set up, you can do so within file path /templates/ja_purity_iii/css

Does that work a bit better for you?

[victor_ncr Friend victor_ncrJoin date: April 2014Posts: 10Downloads:0Uploads:1]

#531476

Yes, it works. That’s good, custom.css is working.

Now the only problem is this code change all the container to 100% width, however, i hope just change the container for Slideshow, so can i do that? :laugh:

I’m so sorry to bother too much

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#531483

Try This . . . .

Within the same custom.css file, put the following CSS rule . . .


.slideshow .container {
width: 100%;
}

and then, also add the following:


.carousel-inner > .item > img, .carousel-inner > .item > a > img {
line-height: 1;
margin-left: auto;
margin-right: auto;
}

See how that works out for you.

[victor_ncr Friend victor_ncrJoin date: April 2014Posts: 10Downloads:0Uploads:1]

#531488

works great，thank you so much….

[victor_ncr Friend victor_ncrJoin date: April 2014Posts: 10Downloads:0Uploads:1]

#531493

Hi Toc
I don’t think the following code is working。

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
line-height: 1;
margin-left: auto;
margin-right: auto;
}

Here is my problems:

1. If it is possible to margin left and right (No gap at Part 1 and Part 2), and make bottom padding (part 3) smaller.
2. If i add the control, the control shadow doesn’t fit the picture ( see Part 4), can make it fit ?

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#531495

You can try the following:


.carousel-inner > .item > img, .carousel-inner > .item > a > img {
line-height: 1;
margin-left: auto;
margin-right: auto;
width: 100%;
}

[victor_ncr Friend victor_ncrJoin date: April 2014Posts: 10Downloads:0Uploads:1]

#531497

Doesn’t work

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#531504

<em>@victor_ncr 422499 wrote:</em><blockquote>Doesn’t work</blockquote>

You added the width: 100% property to the above rule within your custom.css?

[Author]

Posts