Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Questions
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
Old September 18th, 2012, 04:04 AM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default Front Page configuration

Hey team

What I am intending to do on my store front Page is the following;

Show 4 different cateogries

1. Best Selling (when products become available)
2. Category
3. Category
4. Category

So my understanding here is I would create 4 product lists, use c=xxx (category id) in the store frontpage view for each particular category - correct?

I would also like to create a colored border across the page separating each category with the category heading inside each one - how would I do this?

To give you an idea what I am say here, look at this page http://www.everbuying.com/

They use a blue cell or whatever, have not chosen my color yet, just in the configuring stage.

Appreciate your assistance.

Many thanks

Last edited by nzcid : September 18th, 2012 at 04:06 AM.
  #2  
Old September 18th, 2012, 08:35 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

Yes, you're on the right track.

For styling purposes, you should add your own CSS ID to the start of the loop. For example, change this:

<div class="pl">

To this:

<div class="pl" id="redborder">

Then you can add some CSS to target the borders and text in that list of products.

Eric
  #3  
Old September 18th, 2012, 06:08 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
Hi

Yes, you're on the right track.

For styling purposes, you should add your own CSS ID to the start of the loop. For example, change this:

<div class="pl">

To this:

<div class="pl" id="redborder">

Then you can add some CSS to target the borders and text in that list of products.

Eric
Hey Eric

Sorry I am going to need some help here. I looked at the CSS using FB but with this I not sure what I am looking at are you able to assist me please.

Here is what I trying to achieve.

1. remove border around the prduct themselves just on this view
2. Put a very light border around the actaul product list
3. Add a cell at the top of each product view and place a background color in that cell as well as the category name or some text.

Just like the site I have linked here in these posts.
  #4  
Old September 18th, 2012, 09:29 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

Can you post a link to this site plus the store ID?

Eric
  #5  
Old September 18th, 2012, 09:35 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
Hi

Can you post a link to this site plus the store ID?

Eric
Store 35251
url http://www.chinawholesalectronics.com/

I added a header code in the product list itself to get the name there.
  #6  
Old September 19th, 2012, 09:25 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

This should get you in the ballpark.

Code:
#redborder {
	border: 1px solid gray;
}

#redborder h1 {
	background: silver;
}

#redborder .pl .t1 .bdr {
	border: 0px;
}
Note that you can't add id="redborder" to more than 1 place on any page. You've added it to a few different elements and that WILL cause problems.

Eric
  #7  
Old September 19th, 2012, 04:07 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
Hi

This should get you in the ballpark.

Code:
#redborder {
    border: 1px solid gray;
}

#redborder h1 {
    background: silver;
}

#redborder .pl .t1 .bdr {
    border: 0px;
}
Note that you can't add id="redborder" to more than 1 place on any page. You've added it to a few different elements and that WILL cause problems.

Eric
Hey Eric

Many thanks for taking the time for the code.

In regards to the other issue, so are you saying that it is only possible to have this for one product list only, whereas I wish this for four product lists. Is that what you are saying..

If so do you have any other suggestions how to do this via custom css or is this a situation where the theme itself has to be altered?

Many thanks
  #8  
Old September 19th, 2012, 04:11 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

If you want the 4 product lists styled exactly the same, it's best to use a CSS class instead of an ID.

So you'd have this <div class="pl redborder"> instead of this <div class="pl" id="redborder">.

And change all occurrences of #redborder to .redborder

If you want them styled differently, you should use 4 different CSS IDs.

Eric
  #9  
Old September 19th, 2012, 04:14 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

The code works great and is what I am looking for, see below;

url: http://www.chinawholesalectronics.com/

It is matter of how do I have the same thing for the other product lists. Can I give each one a different name?

Just reaching for answers here.

Last edited by nzcid : September 19th, 2012 at 04:16 PM.
  #10  
Old September 19th, 2012, 04:24 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
Hi

If you want the 4 product lists styled exactly the same, it's best to use a CSS class instead of an ID.

So you'd have this <div class="pl redborder"> instead of this <div class="pl" id="redborder">.

And change all occurrences of #redborder to .redborder

If you want them styled differently, you should use 4 different CSS IDs.

Eric
Great did this in each product list and changed the code to reflect the changes but it is not working quite right. Not adding background color to the title.

See here: http://www.chinawholesalectronics.com/

To make this easier maybe the titel bar does not need a border.

Last edited by nzcid : September 19th, 2012 at 04:26 PM.
  #11  
Old September 19th, 2012, 06:23 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

You can give your h1 a CSS class like this:

<h1 class="cat_name">.....

Then add that class to your Custom CSS:

.cat_name { ... }

Eric
  #12  
Old September 19th, 2012, 06:50 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
Hi

You can give your h1 a CSS class like this:

<h1 class="cat_name">.....

Then add that class to your Custom CSS:

.cat_name { ... }

Eric
How about this Eric

Code:
.modcont h1 {
background-color: #16ADEF;
color: #FFFFFF;
margin: 0;
padding-left: 10px;
}
.redborder {
border: 1px solid #E3E3E3;
}
  #13  
Old September 19th, 2012, 07:27 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

That will affect all of your h1 tags in your store.
  #14  
Old September 19th, 2012, 07:34 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
That will affect all of your h1 tags in your store.
thats what I thought but I checked with someone and this is what they said;

The ".modcont" class is only for the box with your product.

I cannot see it affecting anywhere else on the site.
  #15  
Old September 19th, 2012, 07:36 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

We're both right. The .modcont class is a Datafeedr specific CSS class. So anywhere where there is an h1 tag somewhere within your place where your store is displayed, your styles will be applied to that h1 tag.
  #16  
Old September 19th, 2012, 08:01 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
We're both right. The .modcont class is a Datafeedr specific CSS class. So anywhere where there is an h1 tag somewhere within your place where your store is displayed, your styles will be applied to that h1 tag.
Okay so how do we meet in the middle somewhere to get this part working for just those blocks on the main page.
  #17  
Old September 19th, 2012, 08:02 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Quote:
Originally Posted by nzcid View Post
Okay so how do we meet in the middle somewhere to get this part working for just those blocks on the main page.
Do it the way I said here: /show...5478#post35478
  #18  
Old September 19th, 2012, 08:09 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
Do it the way I said here: /show...5478#post35478
I just did that and was replying to you. There is still an issue with the code in the font color does not change to the RGB color in the code

Code:
.cat_name {
background-color: #16ADEF;
color: #FFFFFF;
margin: 0;
padding-left: 10px;
}
.redborder {
border: 1px solid #E3E3E3;
}
  #19  
Old September 19th, 2012, 08:27 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Try
Code:
#view h2.cat_name {
background-color: #16ADEF;
color: #FFFFFF;
margin: 0;
padding-left: 10px;
}
  #20  
Old September 19th, 2012, 08:37 PM
nzcid nzcid is offline
 
Join Date: Dec 2011
Posts: 404
Default

Quote:
Originally Posted by Eric View Post
Try
Code:
#view h2.cat_name {
background-color: #16ADEF;
color: #FFFFFF;
margin: 0;
padding-left: 10px;
}
That worked - you are a star and I really aprreciate all the time you must of spent on this. I will leave you alone now.
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Front Page shoespecialists Questions 1 July 14th, 2012 01:07 PM
Changing Store Home Page FROM Site Front Page markz Problems 10 January 29th, 2012 12:13 PM
All page links go to store front page tex22 Problems 10 April 20th, 2011 12:41 PM


All times are GMT -5. The time now is 12:55 PM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.