Weaver Xtreme Tips and Tutorial (part 7)

[scrambler]

INDEX for all the threads is here: http://forum-archive.weavertheme.com/discussion/10344/index-for-the-weaver-xtreme-tips-and-tutorials-threads

If you are new to CSS Customization, read the introduction of http://forum-archive.weavertheme.com/discussion/590/infos-and-examples-for-custom-css-rules

If you have not done so yet, PLEASE READ THE HELP in Weaver Xtreme > Help > Weaver Xtreme Theme Documentation!!

1) Display posts as Title + Featured Image with Featured Image above the title.

Xtreme has options to do that for Full Posts and for Excerpts in Main options > Post Specifics > Featured Image – Posts > FI Locations (Full Post & Excerpts options)

But that option is not available for Title + Featured Image.

In order to achieve the same results, we can set the “Display post as” option to Excerpts, take advantage of the above mentioned option for FI Location – Excerpts, then add the CSS Rules below in Main options > Fonts & Custom > Custom CSS Rule box to hide the excerpt.

.page-id-xxx .entry-summary, .page-id-xxx .entry-meta  {display:none;}

Replacing xxx by the page ID number.

If you have Plus, you can put the simplified rule below in the Per page Style box of your page with posts instead.

.entry-summary, .entry-meta  {display:none;}

2) Making 3 & 2 columns styling flush on the left and the right

NEWER VERSION on the Guide site Here

A- 3 columns:
Weaver uses a class content-3-col to style 3 columns layouts. The class is used in multi columns post layout, but can also be used manually on html divs.

The way these are styled is by setting the width of each column to one third (33.33%) then adding a 1% left and right padding to each container. As a result, there is a 1% space left of the first columns, and 1% space right of the third column.

On small tablets, the 3 columns transition to 2 columns, with the same issue.

If you need to have the first and last column flushed with content, then you will need to modify the styling using the rules below

.content-3-col {padding-left:.666%;padding-right:.666%;}
.content-3-col:nth-of-type(3n+1) {padding-left:0;padding-right:1.333%;}
.content-3-col:nth-of-type(3n) {padding-left:1.333%;padding-right:0;}

.is-smalltablet .content-3-col {padding-left:1%;padding-right:1%;}
.is-smalltablet .content-3-col:nth-of-type(2n+1) {padding-left:0;}
.is-smalltablet .content-3-col:nth-of-type(2n) {padding-right:0;}

B- 2 columns
For two columns, use the rules below

.content-2-col:nth-of-type(2n+1) {padding-left:0;}
.content-2-col:nth-of-type(2n) {padding-right:0;}

Note:
If you only need that change on a specific page, you would need to add a page-id class in the rules’ selectors.
For 3 columns it would look like

.page-id-xxx .content-3-col {padding-left:.666%;padding-right:.666%;}
.page-id-xxx .content-3-col:nth-of-type(3n+1) {padding-left:0;padding-right:1.333%;}
.page-id-xxx .content-3-col:nth-of-type(3n) {padding-left:1.333%;padding-right:0;}

.is-smalltablet.page-id-xxx .content-3-col {padding-left:1%;padding-right:1%;}
.is-smalltablet.page-id-xxx .content-3-col:nth-of-type(2n+1) {padding-left:0;}
.is-smalltablet.page-id-xxx .content-3-col:nth-of-type(2n) {padding-right:0;}

Replacing xxx by the page id number

3) Showing posts in more than 3 columns for non masonry columns

NEWER VERSION on the Guide site Here

Below are the CSS rules  to create 5 columns with a 1% space between them on desktop, then 3 columns on small tablets and 2 columns on phones.

Do not use masonry or any column option.
Replace xxx by the page id number

.is-desktop.page-id-xxx .wvrx-posts article {float:left;width:19.2%;margin-right:1%;}
.is-desktop.page-id-xxx .wvrx-posts article:nth-of-type(5n) {margin-right:0;}
.is-desktop.page-id-xxx .wvrx-posts article:nth-of-type(5n+1) {clear:both;}

.is-smalltablet.page-id-xxx .wvrx-posts article {float:left;width:32.66%;margin-right:1%;clear:none;}
.is-smalltablet.page-id-xxx .wvrx-posts article:nth-of-type(3n) {margin-right:0;}
.is-smalltablet.page-id-xxx .wvrx-posts article:nth-of-type(3n+1) {clear:both;}

.is-phone.page-id-xxx .wvrx-posts article {float:left;width:49.5%;margin-right:1%;clear:none;}
.is-phone.page-id-xxx .wvrx-posts article:nth-of-type(2n) {margin-right:0;}
.is-phone.page-id-xxx .wvrx-posts article:nth-of-type(2n+1) {clear:both;}

The way you calculate the width percentage depending on the number of columns is the following:

Total width=100%
number of columns= NC  => Number of spaces NS = NC-1
Space between columns S => Total space used between column TS = S x NS
Width of each column is 100% minus the space between columns divided by the number of columns
WC = (100 – TS)/C
with NC=5 and S=1% => NS=4 ; TS=4×1%=4% ; WC=(100-4)/5=19.2
with NC=3 and S=1% => NS=2 ; TS=2×1%=2% ; WC=(100-2)/3=32.66
with NC=2 and S=1% => NS=1 ; TS=1×1%=1% ; WC=(100-1)/2=45.5

4) Additional formatting choices for the YouTube or Vimeo shortcode

NEWER VERSION on the Guide Site Here

5) Optimizing parallax images for portrait and landscape.

NEWER VERSION on the Guide Site Here

In a parallax design, the background image of the parallax area is stretched to cover the whole browser area, so that as the parallax window is scrolled vertically, it is entirely filled with content from the image.
As a result, when the browser ratio differs from the image ratio, some cropping will occur (vertically or horizontally). If using an image with a landscape ratio, when viewed on a portrait ratio screen, this will result in a lot of cropping.

In order to minimize the cropping when viewing the site on a browser with a landscape ratio (most desktop), versus a portrait ratio (mobile devices in portrait orientation), we can specify a different image to be used for portrait ratio situation.

A- If using Posts:

For each parallax post, do the following:

• Place the URL of the image with a landscape ratio in the Desktop BG Image box of the parallax post.
• Add the rule below in the Per Post Style box (dont forget the + at the beginning of the rule)

+@media screen and (orientation:portrait) {
.parallax#post-xxx-p {background-image:url(PortraitImageUrl) !important;}
}

Replacing xxx by the post ID number, and PortraitImageUrl  by the URL of the image with a portrait ratio.

When the browser (desktop or mobile) will have a portrait ratio the default landscape image will automatically change to the portrait image.
It will not stop some cropping to occur, but it will considerably reduce it.

B- If using the parallax shortcode:
Make sure you use the class option in the parallax shortcode with a different name for each block like below
[parallax class='mypar1' ...]xxx[/parallax]

Then change the rule to the one below
+@media screen and (orientation:portrait) {
.parallax-base.mypar1 {background-image:url(PortraitImageUrl) !important;}
}

Using the class name
Put the rule in the Per Page style box of the page that has the parallax shortcodes

If you are doing that for several parallax blocks, you can put all the rules in the same @media rule

+@media screen and (orientation:portrait) {
.parallax-base.mypar1 {background-image:url(PortraitImageUrl) !important;}
.parallax-base.mypar2 {background-image:url(PortraitImageUrl) !important;}
}

As usual, if I missed something or screwed up, please chime in 

[Andrewjmarino]

Hi,

It’s very helpful to have these tips and tutorials. I know that you’re all working hard to help us.  

Is there any chance we can get screenshots of the tip, too?

And, video tutorials of the more “essential” tips and common features/requests would be great, too 🙂

Thanks again for putting these together.

Andrew

[scrambler]

For most of these tips, screenshots really do not bring much, but if you don’t understand anything in the tip, you just need to speak up.

Video tutorials are a whole different ball game, they require a lot of time and preparation, not really have the bandwidth for that I am afraid 🙂

[Weaver]

Video tutorials have long been on my list, but the require tons of time and resources. And to do them right, it would really cost a whole lot of $$$.

At the moment, theme requirement changes put in place by WordPress.org will be resulting in a significant change to how Weaver Xtreme will be allowed to function. In the end, it won’t lose anything, but will require a huge amount of re-coding to achieve the identical option interface currently in use.

So, video tutorials remain a 2nd level goal.

[scrambler]

Added item #4, Video shortcode formatting choices

@weaver, Ideally you could implement this in the shortcode options doing the following.

1- Change the rule generated by percent=xx  from max-width:xx%  to  width:xx%

2- Add the float to the center option together with a third value for aligned right.

center=0  float:left

center=1  no change

center=2  float:right

I believe that when people use a reduced width they want to wrap content and not create a dead space. They can always add a clear in their content if they dont want to.

3- Add a maxwidth option in pixel, people could use instead of the percent option

[scrambler]

Added Portrait / Landscape Parallax optimization (item #5)

[Author]

Posts