I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.
Related
I want to create a navbar like here: http://www.devoncrawford.io/
I couldn't figure it out how to interact with css elements through my ts code.
Maybe you can give me a tip, where I could research a bit more.
I would also love to get this autoscrollbutoon and just be able to interact with my css stuff.
I found a lot of jQuery stuff, but I am not familiar with it. Is that working in angular and should I learn it?
Thanks for your time. Sorry, it is a little bit general question, but I hope you can give me some advice
Check the below article which explain how to create sticky navbar using angular with good explanation and example
Ref:https://netbasal.com/reactive-sticky-header-in-angular-12dbffb3f1d3
Example:https://stackblitz.com/github/zetsnotdead/ng-reactive-sticky-header
I would use an windows eventListener to look at the scroll movement.
window.addEventListener('scroll', this.scroll);
After the scroll hits a number of vertical pixels, you could change the navbar background-color from 'transparent' to the color you want. (in the examples case '#fff'. You could make two different classes with the different background-colors and append or remove the css class.
Hope this helps.
I am attempting to create a View Slideshow for a website I am designing and the have it so an image-specific caption/description is placed over each image. I've been Googling some solutions and the only thing I could find was a solution for placing captions above or under the image, not on top of it. I feel as if there should be a very simple solution for this sort of thing, however, I have been unable to find it.
First, I would like to know if this is even possible with View Slideshow and if so then how to accomplish this.
Any information that is provided will be greatly appreciated.
Just use CSS! When you think about it, it's not about the views module. Even html doesn't allow you to put two things at the same place. Not without CSS anyway.
I managed to do quite the same on this website (cf. the slideshow of the homepage). I only used the position:relative and then for exampletop:XXXpx and left:XXXpx propreties to position the text wherever I want in the slideshow container.
If you are not familiar with theses CSS propreties, here is a little demonstration of how it works. Have fun!
I am building a site using Drupal 7 and have run into a CSS issue. I am trying to wrap everything on this registration page in the center and at the same time reduce the width of the drop down buttons. I believe I've narrowed the problem to my logintobaggan (drupal module) css sheet. But the button "widths" seem to be from the foundation.min.css (according to chrome elements). How would you guys approach this CSS problem? I am relatively new, so please don't be too harsh ;). Thanks!
http://medicaldoctorapps.com/user/register
I would get Firebug or similar in-browser development tool, select the element you are interested in seeing the CSS properties for, and then see exactly which rules are being applied or overridden. You can even modify the CSS right there in the tool until you get want you want.
From such a tool, I can see that the button widths are not explicitly defined, but are basically derived from the amount of padding (5px) around the text string inside the button.
The rules are defined starting on line 41 of this file:
http://medicaldoctorapps.com/sites/all/modules/logintoboggan/logintoboggan.css?mgqhxk
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."
Currently, I am implementing a scrollbar using a custom embedded image using my CSS stylesheet. This is a very simple, thin scrollbar. I would like to configure this scrollbar using CSS properties at runtime, but so far I have been unable to do so.
I know it can be done because I've seen examples of it in the net, but no code to review. Anyone have any suggestions?
Thanks!
This blog has an example that you can view the source of with a right click:
http://www.axelscript.com/2008/02/20/custom-scroll-bar-using-css/
This one has a few links that redirect to examples with image skins:
http://www.foxarc.com/blog/article/101.htm
You can see a lot of the css stuff for scrollbars and pretty much everything else here:
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#