Bulletpoints pages & sidebar

Just a few more questions of some issues I encountered.

• How can I give the sidebar a different colour than the page itself? The background of the sidebar is also displayed in white, making the page very wide. Alternatively, is it possible to decrease the width of the pages and display the sidebar as a separate block?
• You have succesfully inserted images as bulletpoints (as posted under thread http://www.inkthemes.com/community/threads/home-page-bullet-points-and-image.7201/#post-26953) on my homepage (second feature content). I would like to do the same for two pages. Looking at the HTML and Custom CSS you've used I would be able to do this myself now. But what would I fill in within the CSS part instead of the first bold phrase (example below) order to link it properly? In this case that would be for the pages infinitummobile.com/waarom-een-mobiele-website en infinitummobile.com/mobiele-website-functies

.col3 .inner_area ul.first_column li.first{
list-style-type: none;
margin-left:0;
background-image: url(http://www.infinitummobile.com/wp-content/uploads/2013/09/full-compatibility.png);
padding-left:30px;
background-repeat: no-repeat;
background-position: 0 2px;
}

Thanks!

 

Hello.

1. For your first issue,
Could you please explain your issue more clearly with the help of screenshot images.

2. For your second issue,
you need to create separate class or id (i.e. selector) for each <li> tag with in the <ul> tag having their separate class or id and style <ul> and <li> tag individually.

For example:
Put the code like given below in the text editor of your pages in your dashboard.

<ul class="first_page">
<li class="first">Enter the content of your first list </li>
<li class="second">Enter the content of your second list</li>
.
.
<li class="nth">Enter the content of your nth list </li>
</ul>

Now, style them individually by putting the code in the Custom CSS section of your dashbaord

Code:

.content ul.first_page li.first {
margin-left: 0;
list-style-type: none;
background-image: url(Enter the URL address of your bullet images here);
padding-left: 30px;
background-repeat: no-repeat;
background-position: 0 2px;
}
.content ul.first_page li.second {
margin-left: 0;
list-style-type: none;
background-image: url(Enter the URL address of your bullet images here);
padding-left: 30px;
background-repeat: no-repeat;
background-position: 0 2px;
}
.content ul.first_page li.nth {
margin-left: 0;
list-style-type: none;
background-image: url(Enter the URL address of your bullet images here);
padding-left: 30px;
background-repeat: no-repeat;
background-position: 0 2px;
}

Similarly, do the same process for others.

 

Hi Piyush,

Thanks for your reply.

1. Regaring the first issue, I have attached 2 screenshots. The first screensho shows the current layout with a very wide page, also caused by a sidebar in the same white colour making it look very wide. I would like to have a less wide page, or a separate block/sidebar of a different colour like in the 2nd screenshot.
2. I have added the code as mentioned by you above, but nothing appears to happen. I've inserted the ul/li coding in the page itself, the CSS code within the CSS styling field and I've uploaded the images. Nothing has changed though.

Cheers,

James.

 

Never mind the 2nd issue, it's working now. Think it must have been a cache problem.

 

Hello,

1. Unfortunately there isn't a way to do that with our theme unless you custom code something up. Sorry.
If this isn't something you're able to do then you would need to hire a developer for this.

2. The above given solution are worked for the feature page on your website.

Likewise, with that trick you have to do for "Why mobile ?" page.

But, now I have resolved this issue. You can check your website.
Only you have to put URL of your bullet images in their respective URL code in custom css section.

 

I've followed the steps as mentioned above. Nevertheless, the images don't show up.

The first 5 images do show up though, but these are the wrong images - the same images as http://www.infinitummobile.com/mobiele-website-functies/. The subsequent images (li.sixth - li.eleventh) don't appear.

Could this be due to the fact that there is already another "first_page" within the coding part for the images as in url http://www.infinitummobile.com/waarom-een-mobiele-website/?

 

Yes, you have to use separate class or id for <ul> tag in different pages and then style <ul> and <li> tag individually.

For the bullet image on feature page, go to the custom css and put URL of your bullet images in their respective URL code as shown in the image given below.




This will solve your issue.

 

Hello,

Your issue has been resolved you can check your website.

 

Thanks Piyush!