I've just started to create a new project by using Docusaurus and have tried to change background of home page to linear gradient. However, couldn't make it. I can change the navbar and the footer colors seperately, but how to make the background of the page like shown in this picture?
In case of anyone wondering the result, I could solve the problem. By using the swizzling as stated in docusaurus documentation;
run npm run swizzle, and choose the Layout component in order to eject or wrap. The Layout folder will be visible to you under src/theme/ directory. You can edit the html,body style in styles.modules.css file to change the all background of the pages.
Related
Currently, I'm browsing some pages and I found that there's a page where the design is very pleasing to me. So I'm trying to replicate it, but unfortunately that I can't figure it out due to my lack of CSS skills.
So here's how that page work:
Whenever the class is active, it'll hop up a bit (the page I'm looking at is using Swiper, too!)
But however, the Hop-up image will go out of the box of Swiper
And what I'm doing right now, there's a box just like that page, but the image or anything else if it's larger than the current box, it'll be cut. I can't make it go outside of the Swiper's box.
Here's how I'm currently doing it, I made a quick dataSample and then mapped it, get the current slide to have the active class, and then CSS it. Any help is appreciated, many thanks.
I've left comment on what I'm doing in the CSS at CodeSandbox.
Code: CodeSandbox - Trying to create Hop-up image using Swiper
Whenever I start the app, I get WHITE empty background when waiting for app to load.
Thats very annoying.
Although I set app to use DARK theme, which is working fine, I still have that white screen, when app is loading.
Is there a way to fix this ?
That white background is likely just the browser before your HTML and/or CSS areloaded. I see three options:
Show a splash screen
Add an inline style to the body tag (style="background-color:black")
Improve your app's loading time, e.g. by optimizing and/or splitting up your CSS and JS.
I am having a problem with displaying my navbar within my Joomla 3 website when resized to a tablet/mobile size.
For some reason I have a grey nav button appearing on the left and when i click this a blue nav bar appears on the right hand side with the menu then dropping down.
How can i make it so that I have either the grey or blue box and then when clicked the dropdown appears but all from one side.
I am confused as to why both are appearing.
When checking with firebug, I can see that one is navbar pull-left class and the other class is nav-collapse.
There are several variables to deal in this matter.
First, make sure version of bootstrap want to use and what you're really using.
Second, if you want to use the bootstrap version 3, make sure it is not charging well, version 2, which is the default Joomla brings. This will you manage in your template.
Third, you may also need an override of template for the code generated by joomla, run right.
I leave part of the code that you need for all this.
Get bootstrap 3 in joomla template. Copy js and css files to directorys and...
$doc->addScript($tpath.'/js/bootstrap.min.js');
$doc->addStyleSheet($tpath.'/css/bootstrap_3.css');
To avoid conflicts, how not to load js files it is as follows:
unset($doc->_scripts[$this->baseurl.'/media/jui/js/bootstrap.min.js']);
In this case, we remove the bootstrap.min.js joomla file loaded by default.
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
What would be the most effectient way to hide a background image if the url has node in it it?
I have set a background image that runs through the site however I dont want the background image to show if the url has node in it. For example,
http://example.com/node
http://example.com/node/add.
The site uses drupal and my css is entry level to be polite!
Thanks
I know in pure CSS there isn't a way to do what you are trying. However, I am pretty sure that Drupal would find a way to prove me wrong. :-)
The best way to do this would be to create a new stylesheet or style for the pages that have node in the URL and override the default background. You can do that by using the following code:
background-image: none;
But remember that this should be called after the common stylesheet that is on all the pages otherwise you will see the background image on the node pages as well.