I created a child theme based on the responsive i-transform theme http://templatesnext.org/itrans/, but in the end it feels like I'm spending a lot of time undoing the i-transform CSS. However, if I dequeue the entire parent stylesheet, things get out of whack because I used the default parent wrapper here, a div there, etc. While it runs fine with the parent stylesheet, it's very sloppy and I'm sure it slows down the page some to have all these layers of overridden CSS.
If I had the time, I could go through the 4000+ lines of the parent stylesheet and copy out what I need. But I'd rather not. Is there some way to get a clean copy of only the css that my pages use... the css that "wins" and is really being displayed, if that makes sense?
You can't, or at least not like you mean. You're trying to both create a new stylesheetand still want to use some of the code from the original stylesheet (the default wrapper you mention above). You can't completely ignore (i.e. delete) the original stylesheet and still use part of it.
If you still want to use part of the original stylesheet in your new one, just copy and paste the pertinent bits across.
Related
I'm trying to implement a text highlighting system that works by duplicating the Nodes in a Range, positioning them right behind where they were, and styling the new background clone to look like highlighting (make it have a yellow background, etc).
Skip this paragraph if you don't care about the justification/thought process I went through to come up with this goal. My past considerations: 1. I considered using <mark> tags, but when we use a Selection object to try and change highlighting and the Selection's Range contains a <mark> tag, there is no simple way to undo any of the previous highlighting or <mark> tags in the selection. I've thought and experimented a lot with developer tools like rangy, and they just won't work for this, but it's a feature I need. 2. I also considered putting Range.getClientRects() behind the text, but that method returns ALL client rects without any control, so if the selection is over a <div>, the return value includes a massive box for the div. If I need to worry about positioning uncontrollable Range.getClientRects() vs positioning the highlighted Node itself, I'd rather pick the latter, ie my current goal.
What would go into making sure that the cloned Node's positions, widths, and heights are all the same as the original's at all times? Is it enough to just set its position to the old one's?
I'm making a website for an event, then I've added a countdown to it, but my footer and the button above it, are behaving differently in the page where the countdown is present.
I've come up with this:
the countdown is good as far as it's connected to a Bootstrap CSS;
That Bootstrap CSS makes my footer and button change aspect;
My question is: how do I make the countdown stay and work with the footer and button aspect unchanged?
This is the page of the website which doesn't work: http://goo.gl/mH9nLh
And this is the one which works:
http://goo.gl/24SZxQ
I'm not linking you the code 'cause I don't know where the error is, this way you'll be able to see each part of code and mostly: what should I take from that Bootstrap css file or some other tricks to get around the problem.
If you need anything please don't ignore this question, rather leave a comment I'll text back instantly!
I checked the 2 links you pasted above.
There is a main.css file which is included in the second link , which has styles for the table and it's subsequent child classes.
The same is not available in the first link and this is the reason you are seeing 2 different styles.
Please include the same set of css files in both the pages so that I can better debug the possible problem areas.
I'm attempting to rearrange elements on a Volusion store for my employer. The products page we currently have looks like This
I've been tasked with moving the details box
(containing "Nothing says "I'm ready to learn!"), up and to the right, to align with the price box.
The box is a table contained in a hierarchy of nested tables, at roughly the same "depth" in a different branch.
I don't have access to the HTML for the page, only a template html file that generates menus and footers along with the relevant CSS. Some JS exists on the site but since I lack experience with it, I'm hesitant to get into it.
Because of the table-and-div structure, and the fact that I cannot edit the HTML, I'm left with tweaking stylesheets and possibly some javascript. My issue is this: How, using only these tools, can I take an element in one container and reposition it relative to elements in another container? I've tried
Position:Relative;
left:some percentage;
top:some negative percentage;
Which, for a single page, I can get to look quite good, but if I allow others to load the page it falls apart completely, due mostly to the fact that the container for the element I'm moving is calculated based on screen width, and the container for the destination is calculated with the width minus a constant value(the image for the product).
My employer is willing to accept that the arrangement won't be perfect, they know Volusion is the devil complex. But it's important to them that their products display all relevant information "above-the-fold". Obviously I've not found any sort of answers on this. I don't find all that many people who have to edit a webpage without access to the raw code, because that's stupid. Worse still, moving an element to align with a completely different container is just bad policy as I gather, but its what I'm being asked to accomplish.
The only way to do this on Volusion is with javascript. You do not have access to the HTML for the product page and given that it is built with tables there is no way to move the product description area up with CSS.
You need to use javascript to detach and append the product description box below the product details area.
There is no way around it... You need access to the HTML files. You could do it with absolute positioning but that is not good practice.
Because you are working with a template; if you change the arrangement of that page then all of the other product pages will follow. So the reason you can't find the HTML is probably because you are looking for a .php containing html..
I suggest to spend time understanding the template or get a volution expert.
I working on a very old website that I am trying to update and I seem to be running into some issues.
My biggest problem seems that it seems that the same style sheets need to be included in each frame instead of placing them in the header frame and effecting the whole page.
Is there any way around this? I have some bootstrap I wanted to include and don't really want to declare those a billion times.
CSS cannot be applied across frames, I believe.
Main thing is, frames are depreciated. First thing you need to do is remove them. However, given it's an old site you just want to update, removing might not be an option.
Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology - but nothing language specific.
E.g:
Store all the images in an array or linked list
When the carousel is loaded, resize the displayed images as X% window size
When the next button is pressed, imageA moves to a hidden html element.
Et cetera.
I hope that makes sense.
Thanks.
You don't want anything language specific but you want to know about carousels on the web and you've tagged this with 'html' and 'css' so I'm going to assume that I can talk about HTML and CSS but I'll try to keep it high level.
If we ignore Flash, then you're left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don't resize via HTML - its doesn't look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.
With HTML5, you have more options, but the above is the way things have usually been done until now.
Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery - it will make things much, much easier.
If you want to build it by yourself, one straightforward way would be to have a master div and all the images in it, lined up horizontally. Have the overflow set to hidden on the master div. Then use javascript and set scrollLeft as the user clicks the next, previous buttons.