I'm taking a look to this website http://planetshine.net/demo/regolith-wp/ trying to understand how the horizontal layout is obtained.
I'm just trying to disable the javascript libraries one by one (I want to identify those essential fot the layout and those less important). And beginning to disable only the "buttons.js" library the layout already changes (for example, the vertical scroll bar appears). I would understand why this script "buttons.js" is so influential for the layout.
Some CSS styles may be added by javascript after a page is loaded. This often occurs in plugins: sliders, custom scrollbars etc. You need to inspect places, where this happens and find out, which classes or html elements disappear. Then you can recreate them manually and the whole page will work as expected.
Related
I'm currently working on a dashboard and I'm having a design issue regarding the scrollbar in the content of the page.
A preview that shows the different parts of the site can be found here.
Purely for design purposes, I would need to keep the current content in exactly the same position (for instance, I don't believe that resizing the components using percentages would work properly in this case) but have the scrollbar totally on the right and allow scrolling in parts that are outside of the main element. In this image the parts in green represent the areas where scrolling should be enabled.
Do I need to use JavaScript (I'm using React) and a component only for the scrollbar or can I do everything in vanilla css?
I am trying to find out how some inline css is being added to my html when the page is scrolled down.
I am using chrome dev tools. I think it is supposed to be in console, but I don't see anything show up in there when I scroll the page and know that the javascript is being fired. I assume it is javascript.
When I scroll down the page the header size shrinks to a set amount of pixels. I want to change that number but I can't find the source of what is causing the change.
Inspect element that gets inline styles set.
Right click on it in the Elements tab.
Choose Break on.. -> Attributes Modification.
Scroll the page.
JavaScript execution will stop on line that modifies any of the attributes (including 'style').
If you'll end up in the middle of jQuery/Angular/etc. - look at the Call Stack in the Sources Panel. It should reveal the higher-level code that modifies the styles.
I am trying to adjust the soundcloud embed widget but am having some difficulty. I would like to do two things:
1) Override the CSS for the div.sc-truncate ( overflow: hidden; white-space: nowrap ) which contains the text "Wanderlust Basement Tapes" but will currently not display the entire text due to the aforementioned text. I have added my own style to the site stylesheet with !important but they seem to have no effect which I think has to do with the widget being an iframe.
2) Force the widget layout proportions to show full song list by default. Normally this requires scrolling to the bottom of the list. Ex:
vs
I'm guessing that the proportions change after scrolling via some javascript but all the javascript being used by the widget is minified as far as I can tell and is thus difficult to analyze and/or modify. For this reason I am hoping that a developer of the widget will be able to recommend a possible method.
Thanks!
It's not possible to modify the styles of any page in an iframe from the containing document (including the SoundCloud widget).
Having it spread over two lines does look pretty fine in this case, but obviously title lengths of all sizes also need to be considered. I will pass on the request to investigate removing the truncation.
I'm trying to set up a Github page and I'm using the Tactile Theme template by Jason Long. I'd like to add a vertical sidebar like the one shown in this page.*
I'm 100% new to HTML, Javascript, CSS and everything related with page development but I know my way around python (a bit) so I'm not completely code illiterate.
All I'd need is to be pointed to the snippets of code and files I must add to the template mentioned above to display such a vertical bar and with some luck I can take it from there.
*In that page the vertical bar is not static, ie: it hides when one scrolls down the page (perhaps I'm using static wrong, forgive me if I am and please do correct me) and I'd also like it to always show if possible.
You're looking for the position:fixed property.
I'm trying to find out how to recreate Chrome's new tab homepage with all it's features.
I've tried plugins like isotope, however I've met a lot problems with sorting using the jQuery sortable class.
I've tried just using good`ol css with floats to create a grid, but it's nowhere close to as good as what Chrome has.
Is there a tutorial out there that covers this?
Any pointers in the right direction would be helpful
If your using chrome it'll be easier to use the inspect element function of the right click context menu. This brings up the developer console showing the elements tab. It should also take you to the meat of the layout straight away, without having to scroll through lots of lines! :)
If you haven't seen the developer tools in chrome before, it's well worth getting into! The elements panel will be of particular use:
https://developers.google.com/chrome-developer-tools/docs/elements
In short, the elements panel will give you a live view of the HTML DOM, including a view of the CSS classes that are present on any given element.
Update
From a quick look at the source myself though, it looks like a lot of it is generated in JavaScript first, i.e. the margins and widths of icons etc are set using JavaScript when you manually resize the page. I pretty sure their layout isn't just pure CSS.