Jump to content
Latest News: (loading..)

Recommended Posts

Posted (edited)

hi,

I have 234.1 Edge (BS) oscommerce installed. Found few image headers with slide show addons but non of them are for video. Not familiar with the Edge (BS) skin/template design. There are 3 questions about this topic:

1. Is there a video header addon that can create video from admin on header part (next to the logo) and be able to adjust position?
2. How can I move the search box down under the catalog bar, next to the shop by price module?
3. Where do i modify the skin/template, user.css is blank now, so is there an original file that i can copy from to paste to user.css? And bit confuse with the breadcrum, header and navi with the Edge(BS) version now....how do i change each addon position (left/center/right)

header-01.thumb.png.bf7f264e684d9d495cc8057fa2862d5a.png

Thanks!  Lyn

Edited by ce7

Share this post


Link to post
Share on other sites

1 -  Nothing to create a video but there are some that will display one, though they will need some editing to work in the CE shop.

2 - Change the sort order and width settings for it.

3 - The css should be changed in user.css. There's isn't any cross-reference as to what each class does so you need to figure that out. There are threads here that help with that, like this one.

Share this post


Link to post
Share on other sites
On 10/8/2018 at 2:11 AM, Jack_mcs said:

1 -  Nothing to create a video but there are some that will display one, though they will need some editing to work in the CE shop.

2 - Change the sort order and width settings for it.

3 - The css should be changed in user.css. There's isn't any cross-reference as to what each class does so you need to figure that out. There are threads here that help with that, like this one.

@Jack_mcs hi,

Thank you for the reply and information.

I had copy the ext/boostrap/css files to user.css and try to modify them, somehow it doesn't work, not sure why is it, I guess as you said need to figure it out with more time and practice.

 


Reference for people may also interested in video in header, here is what I did. Find a video java script online, use slide show on header as a mockup, include the script in the template_top.php (need to make sure the path of the css and js folder name properly.)

The position of the header, with advice from Raiwa, I change the Sort Order and Width, it doesn't make it better, but not yet exactly the position I need......

Lyn

Share this post


Link to post
Share on other sites

Hi,

The video is on the header and working fine, but the problem is the position.
I like to have logo about 3 column width on the left, and then header-video take the rest 9 column width on the right. Taking @raiwa   advise, I did play around the sort order and column width, I tried to put same order number, different number, width column to match total 12 columns but it just not show up together....

Another idea is that is it possible the logo stay floating on left-top cornor of the header video? I had tried to change the template files, but it doesn't seems working at all. Any suggestions and example code will be highly appreciated!

Thanks! Lyn

headerVideo-02.thumb.gif.c98b7756414c4a85099b6d54c015b57f.gif

Share this post


Link to post
Share on other sites
Quote

I had copy the ext/boostrap/css files to user.css and try to modify them,

Just a note that you never want to copy over the entire CSS file(s). What you do is find the entries you need to change, and put just them into user.css. They will override what's in the other CSS files. You might find exactly the selector you need already in an existing CSS file, or you might have to brew your own to get more specificity. You need to list only the properties that you are changing, and not everything for that selector.

This way, when system CSS files (ext/bootstrap/css/ etc.) get updated, you won't be overriding everything unnecessarily... just one or two selected items. It also reduces the file sizes to be transferred to the browser and makes user.css easier to understand and work with.


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get (stable) Frozen or (unstable) Edge. See also the naming convention and the latest community-supported responsive "Edge" release

Share this post


Link to post
Share on other sites
1 hour ago, MrPhil said:

Just a note that you never want to copy over the entire CSS file(s). What you do is find the entries you need to change, and put just them into user.css. They will override what's in the other CSS files. You might find exactly the selector you need already in an existing CSS file, or you might have to brew your own to get more specificity. You need to list only the properties that you are changing, and not everything for that selector.

This way, when system CSS files (ext/bootstrap/css/ etc.) get updated, you won't be overriding everything unnecessarily... just one or two selected items. It also reduces the file sizes to be transferred to the browser and makes user.css easier to understand and work with.

@MrPhil  hi,

Thank you so much for the explaination of the reason, I self-learning oscommerce, so a lot of time have no idea what the code mean to do, and I learn a lot from the forums, this is why I like oscommerce as here have lots of expert share their knowledge to others.

Could you please also help with the position of the header? The header video now is using javascript link the youtube video, so it is not really a video playing on header part. I thought of using floating logo overlay but not working.

Tried to change the sort order and width, but no luck at all. How can I manually change the position? Do I  have to change the code in the templates files or define the css on user.css?

Thanks!  Lyn

Share this post


Link to post
Share on other sites
14 hours ago, JcMagpie said:

You can see a working example on the test site https://www.justfastfood.com/

image.thumb.png.0c471f1423242dbe7a7558f8a7d932bd.png

@JcMagpie  hi,

The video header script I have already have a text function there, I did not think of using it as a logo...haha, silly me 🤣....I will check the codepen info as well. thank you so much for your generous help!

Lyn

headerVideo-08.thumb.gif.1cf1c9efb4a459dffc363335035141f2.gif

Share this post


Link to post
Share on other sites

@JcMagpie   hi,

Had look at the working example on the test site https://www.justfastfood.com/.

It is really cool. All looking great!!! Like the video slide show on top of the header video. Will those video clip be able to edit in the admin? And the video is embeded or sit on own server?

Many thanks!  Lyn

 

 

Share this post


Link to post
Share on other sites

They can be embedded or sit on server it's up to you. No my add-on are just simple ones, I prefer to keep things out of the database, so all the clips are again embedded or local if embeded you just edit template file, if local you just add new files to movie directory under images.

I'm not a deveoper so the add-ons are just simple ones made for my site ( and free to the osC forum).

If you need one with admin control then I'm sure if you post in the commercial section one of the developers will be happy to help.

Also the logo can be an image overlay see the osC logo in the top corner.

 

You should also note that Google no longer allows auto play on chrome so make sure your video is muted or it will not Play.

Simply add in your playerVars:

mute : 1

 

New behaviors

As you may have noticed, web browsers are moving towards stricter autoplay policies in order to improve the user experience, minimize incentives to install ad blockers, and reduce data consumption on expensive and/or constrained networks. These changes are intended to give greater control of playback to users and to benefit publishers with legitimate use cases.

Chrome's autoplay policies are simple:

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
    • On mobile, the user has [added the site to their home screen].
  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Edited by JcMagpie

 

Share this post


Link to post
Share on other sites


whole day trying different script to adjust the logo, have it floating at the top left cornor as I want, if I dont assign the style, the image will float in the center right, if I assign the css style, then the header other moduel jam up over top of the header video..... I feel like go crazy and no idea at all how to make them in the right position.....

I just want to logo floating on top left cornor or header video, and other header moduels stay below the header video, had set the sort order behind the header video, but it still not working as it should be....

Ideally I also like to get rid of the white space between the navigation bar and header video, and have white space below header video so have gap with hotline  / search module, gap then breadcrumb underneath before the categories image module!

Can any one please help????

headerVideo-11.thumb.gif.f3e02780ac393cb8a16fa6c50975e8ab.gif

Thanks!  Lyn

Share this post


Link to post
Share on other sites

This is what result I like to achieve!
Still no idea what files or what part of code need to make change in order to make them place in the right position! (The image is from editor, not from the site result!)

And ideally to get rid of the what space in between the header video and the navigation bar...

headerVideo-13.thumb.gif.1fe0cf59c2e70062b45e55666c5a64b2.gif

Share this post


Link to post
Share on other sites

reading boostrap css doc, found this bit of code:

<div class="row">  <div class="col-sm-9">    Level 1: .col-sm-9    <div class="row">      <div class="col-xs-8 col-sm-6">        Level 2: .col-xs-8 .col-sm-6      </div>      <div class="col-xs-4 col-sm-6">        Level 2: .col-xs-4 .col-sm-6      </div>    </div>  </div></div>
	

right now each modular have their own template file, just wonder if it is possible to have a main template file and and change the dive class = "row", to row2, row3, so that each modular position order can be where I requested? (This is the first time to read the boostrap css document and code, so excuse me if the question and thought sound silly...😅

Thanks!  Lyn

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×