Skip Navigation

[Resolved] Tutorial create-a-wordpress-magazine-theme has CSS problems

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.
This support ticket is created 11 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 19:00 10:00 – 19:00 10:00 – 19:00 10:00 – 19:00 10:00 – 19:00 -
- - - - - - -

Supporter timezone: Europe/Madrid (GMT+01:00)

This topic contains 5 replies, has 2 voices.

Last updated by alberto 11 years, 7 months ago.

Assisted by: Caridad.

Author
Posts
#17392

I followed your tutorial https://toolset.com/learn/create-a-wordpress-magazine-theme/, but in the spanish version in page: https://toolset.com/es/aprenda/cree-un-tema-de-revista-en-wordpress/ but the layout comes all wrong.

I´m using Views Base — Magazine Theme I place the CSS you added in the spanish tutorial in the style.css of the Views Base — Magazine Theme
but it wont make any changes, either I place this CSS or not .
Also in this CSS there is a class "magazine_post_excerpt" that is not mentioned in the CSS code you added in the spanish tutorial .
Also when I chose the option table to create the View to return taxonomies I don´t have the option to add 3 columns , is this a bug?
looking forward or your answer ,best wishes

#17407

the <div class="magazine_post_excerpt">[wpv-post-excerpt length="100"]</div>
does not show in Content Template "Post Listing"

#17408

ok I discover the first mistake in https://toolset.com/es/aprenda/cree-un-tema-de-revista-en-wordpress/

In section: a) Cree una View que retorne entradas, in subsection: <b>Ahora haga clic en Agregar campo. Debe seleccionar Título con un enlace e Imagen destacada.
you forgot to add: <b>excerpt</b>

So now I´m able to see the excerpts in the view that query the posts , but the CSS is all wrong ,
in your demo you show the magazine site but you dont show this demo tutorial example on line to see ,
that will help a lot ,looking forward for your answer.

#17472

Dear Alberto,

Thanks for pointing out that mistake, I will get it fixed. May I draw your attention to our Views Demo Downloader plugin? You can install it on a clean wordpress install to get a full running magazine theme like in the reference site.

Take a look at this guide:
https://toolset.com/documentation/views-demos-downloader/

Regards,
Caridad

#17476

Thanks a lot Caridad for your fast response, I downloaded the magazine site with the themes from the begining, and tried to follow the tutorial but i found this problems mentioned to you https://toolset.com/es/aprenda/cree-un-tema-de-revista-en-wordpress/, that doesn´t aloud me to end with a result, like you have in the photo, because the css is incomplete.
I wonder If i haveto put the css line in the style.css of the Views Base — Magazine Theme? If so why I can´t modify the excerp?.
It would be great if you can check the tutorial because It can make life so much easy for all of us .
Also when I chose the option table to create the View to return taxonomies I don´t have the option to add 3 columns , is this a bug?

#17488

I was able to find a solution looking into your tutorial https://toolset.com/documentation/user-guides/learn-creating-using-grids/
I took out the divs from the post listing view template ,
so I end up with this code:

<div class="magazine_post">
[wpv-post-featured-image] [wpv-post-link] [wpv-post-excerpt length="100"]
</div> <!-- end #magazine_post -->
<div class="clear"></div>

then I added span class to each field in the Category Posts Listing view

then I put the css from your tutorial in base theme because it didn´t work in the magazine child theme

/**
* sidebar del view y luego CSS del post listing
*/

#magazine_view_wrapper .magazine_list_title {
padding-bottom: 10px;
}

#magazine_view_wrapper table tr td {
width: 50%;
vertical-align: top;
}

#magazine_view_wrapper div.clear {
clear: both;
}

/**
* Post iteration styles sidebar
*/

.magazine_post {
clear: both;
height: 170px;
width: 263px;

}

.magazine_posts_list ul li {
list-style-type: none;
margin-left: 0px;
margin-bottom: 10px;
border-bottom: 1px solid gray;
padding-bottom: 8px;
padding-right: 10px;

}

.magazine_posts_list p {
font-size: 13px;
}

.magazine_posts_list .magazine_post_featured {
float: left;
padding-right: 8px;

}

.magazine_posts_list .magazine_post_title {
font-weight: bold;
margin-bottom: 5px;

}

.magazine_list_content {
padding: 0px 5px;

}

.magazine_list_content ul li {

}

/**
* Slider styles
*/

.magazine_slide h3.slider_title {
margin-bottom: 10px;
font-weight: bold;
}

/**
* with this I get rid of the bullet title
*/
div.entry-content li{

margin:0 0 0 20px; list-style: none;

}

.magazine_post_featured_2 {
float:left;
margin-right:7px;

}

Thanks for your tutorials it helps a lot , i wish you could do some more with step by step strategy, I help you If you need some help =)

The forum ‘Types Community Support’ is closed to new topics and replies.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.