Jump to content

Basix (Bootstrap Responsive Skin)


CubeCart Bot
 Share

Recommended Posts

3 hours ago, Lyd2020 said:

Hi Nitefox,

Brilliant thank you! it worked, however, when I remove it from the footer/information bar at the bottom it then removes the content when I click on the new button made on the navigation bar. Do i need to write a new style for the new page?  

also, 

One of the category already in use, I would like top make into a page on the navigation bar. how do I move the content linked to the category to a new page linked to the navigation bar? 

many thanks, Lyd 

 

Hi Lyd,

If you edit the page/document via the admin panel "status" should be ticked and "Show link to document in storefront?" unticked. This should hide the link in the footer but leave the content accessible by the new nav link.

If you are linking to a category, don't create a new page/document as stated in step 1. Simply just do step 2 and use the url for the category for the link.

Thanks. 

  • Thanks 1
Link to comment
Share on other sites

Hi Nite Fox, 

 

Thank you for the reply, I have another question aha! is it possible to as a us four images as four separate buttons on the home page as a link to a page of products? as an alternative to the navigation bar. 

Thanks

Link to comment
Share on other sites

14 hours ago, Lyd2020 said:

Hi Nite Fox, 

 

Thank you for the reply, I have another question aha! is it possible to as a us four images as four separate buttons on the home page as a link to a page of products? as an alternative to the navigation bar. 

Thanks

Hi,

Without knowing anything about the images (size ect) you intend to use i can only give a vague example.

Assuming the images you plan on using are all the same size/dimensions then you could do something like:

1) Upload the 4 images to your site (for the example below i've used square images and uploaded them to root > images > source )

2) Admin > Documents > Select the document which is your homepage

3) Select the "Content" tab and then click the "Source" button on the text editor.

4) Add some html to display your image "buttons"  - For the example i am using square images so layout might need changing if you use rectangular images.

<div class="home-blocks">
	<div class="row">
		<div class="col-xs-12 col-sm-3">
			<a href="http://www.google.com">
				<img class="img-responsive" src="images/source/mens_sale.png" title="Shop Mens Sale" />
			</a>
		</div>
		<div class="col-xs-12 col-sm-3">
			<a href="http://www.google.com">
				<img class="img-responsive" src="images/source/womens_sale.png" title="Shop Womens Sale" />
			</a>
		</div>
		<div class="col-xs-12 col-sm-3">
			<a href="http://www.google.com">
				<img class="img-responsive" src="images/source/childrens_sale.png" title="Shop Childens Sale" />
			</a>
		</div>
		<div class="col-xs-12 col-sm-3">
			<a href="http://www.google.com">
				<img class="img-responsive" src="images/source/clearance.png" title="Clearance Sale - All Stock Must Go!" />
			</a>
		</div>
	</div>
</div>

 

5) Add a small bit of css 

When adding custom css styling i recommend you create a custom css file so that they don't get lost during any updates.

To create a custom css file go to skins > basix > css and make a copy of the cubecart.default.css file and rename it cubecart.custom.css

Open cubecart.custom.css  and add the following

.home-blocks{
	text-align:center;
}
.home-blocks a {
	display:inline-block;
	margin: 10px 0px;
}
.home-blocks a img{
	max-width:100%;
}
@media (max-width: 767px){
	.home-blocks .col-xs-12 {
		width: 50%;
	}	
}

 

then go to skins > basix > templates > element.css.php and add

<link rel="stylesheet" href="{$ROOT_PATH}skins/{$SKIN_FOLDER}/css/cubecart.custom.css">

 

And clear your site cache via your admin panel.

 

 

  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...
14 hours ago, Lyd2020 said:

Hi NiteFox,

Looking to add a video to each categorise, where the description is for each product

So does the video relate to the Category or are you trying to display a video for each product when viewing a category?

Link to comment
Share on other sites

On 4/16/2021 at 8:41 AM, Lyd2020 said:

HI NiteFox

It would be a video related to the category

many thanks

Sorry for the delay.

One option would be to use the HTML <video> element in your category description. So you would upload a mp4/webm or ogg video to your site then when writing your description click the source button on the text editor and use something like

<video>
  	<source src="catvideo.mp4" type="video/mp4">
	Your browser does not support the video tag.
</video>

Only issue is you'd  have to play around with adding some other html and styling to try and get the layout right. Alternatively you could add a button and have the video load in a pop-up modal.

 

 

 

  • Thanks 1
Link to comment
Share on other sites

Brilliant thank you! - sorry I have another question 😅, how do you add text and style to the page-header-bar at the top of the page. I have tried and i can't seem to make any changes of it <style> or in the  CSS folder. 

many thanks!  

Link to comment
Share on other sites

On 4/20/2021 at 10:19 AM, Lyd2020 said:

Brilliant thank you! - sorry I have another question 😅, how do you add text and style to the page-header-bar at the top of the page. I have tried and i can't seem to make any changes of it <style> or in the  CSS folder. 

many thanks!  

To add text you would edit templates > main.php

To modify the style you would edit the relevant css file to the skin style you have set as default (style.css , cubecart.style01blue.css, cubecart.style01mint.css ect...) or if you have a cubecart.custom.css file you can add the following to it 

 

.page-head-bar {
	background-color: #3c3241;
	margin-bottom: 10px;
}
.page-head-bar .page-head-bar-links{
	float:right;
}
.page-head-bar .page-head-bar-links .parent-link {
	display: inline-block;
	padding: 5px 10px;
	color: #3c3241;
	background-color: #cddc39;
	font-size: 12px;
	border-left: 1px solid #3c3241;
	border-right: 1px solid #3c3241;
	margin-left: -1px;
}
.page-head-bar .page-head-bar-links .parent-link:hover,
.page-head-bar .page-head-bar-links .parent-link:focus{
	text-decoration: none;
	background-color: #bcca35;
	color: #ffffff;
	border-left: 1px solid #bcca35;
	border-right: 1px solid #bcca35;
}
.page-head-bar .page-head-bar-links .dropdown {
	display: inline-block;
}

.page-head-bar .page-head-bar-links .dropdown .dropdown-menu{
	border-radius: 0px 0px 1px 1px;
	margin-top: 0px;
	border: 0px;
	padding: 0px 0px 0px 0px;
	box-shadow: 1px 2px 8px #323232;
}
.page-head-bar .page-head-bar-links .dropdown .dropdown-menu li a {
	padding: 5px 15px;
	color: #555555;
}
.page-head-bar .page-head-bar-links .dropdown .dropdown-menu li a:hover,
.page-head-bar .page-head-bar-links .dropdown .dropdown-menu li a:focus{
	background-color: #bcca35;
	color:#ffffff;
}

 then modify the style to suit your needs.

You will need to clear the site cache if you have the cache enabled to see css changes

  • Thanks 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...