I'm having a hard time trying to access my CSS & HTML files on my WordPress blog.
I posted a screenshot of what I CAN access, but it's not super straight forward,
However, I need to get into these settings so that I can change the display settings or screen dimensions?
My issue is that whenever someone goes onto my webpage: RobertNolfiRoofing.com
and they resize the window- it moves my content all around. What I want is a fixed setting so that if someone were to resize the browser window it would have a scroll bar, rather than moving content around.
Thanks!
screenshot
In Wordpress 4.8.1, you can use (in almost any theme) the "Customizer" to add your own CSS: In the backend dashboard, choose menu Design > Customizer, which opens the customizer in a column at the left side. There, the last line is "custom CSS", where you can add CSS rules which either are additional or can overwrite existing CSS.
Related
I am cloning https://www.sovereignselfdefense.com per request from the owner. To create a Wordpress site. The site that is currently up is a Kajabi site. I have downloaded all images from the Kajabi site by simply right clicking the site and clicking download. I made the Wordpress theme and the images that did not download (shown with arrows) display fine in the custom wordpress theme.
All images, except these images in the CTA (for example, the gentleman with his arms out) are downloaded.
The client is transferring from Kajabi to Wordpress. I am afraid that the cloned wordpress theme is getting these images from the Kajabi site and, when said site is taken down, that I wouldn't be able to get these images. The Wordpress theme works, and displays these images for now.
I used Google Chrome Inspect Elements to try to find what this image is, and how this image is displaying. I am confused.
I'm requesting some tips on how to identify how the site loads these images in the CTA, so I can download them and link the wordpress theme's html accordingly. If someone could teach me how to identify one image, I believe I will be able to identify the rest of the images. Thank you for helping out.
In the inspect you can see the html code there is style expand it and you can access the background image's URL.I have just highlighted in the images.
They have attached a style block before the parent div of any container which has a background image just expand that style tag and get the image.
Image-1:
Image-2:
Image-3:
Image-1: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/tzJ4ad46RcSJinm7qbnO_Edited-image.png
Image-2: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/qqHvByszR1iu2rvfEQwg_defending2.jpg
Image-3: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/AWzmDDsWTlKOdoWPatUA_SovereignSelfDefenseBrandingPhotography-59.jpg
By clicking the image if you can drag it directly to your desktop that means that image is used by
<img src="">
tag in the code. Either it's used through css.
For your code please check the css file and you will get the image use as "background-image:url()" or you can check through inspect element section by section.
If you are using Google chrome then you can download and install this cool extension.
I'm a Gentleman
Here is the description from that link.
Easily save images with a click, gestures or the extension button.
Save images with one click by using the alt + click hotkey (holding the alt key and clicking the image).
Or save images by dragging them (drag the image slightly on any direction).
Download every image on the page by using the extension button (green button on the top right).
Note: The images are downloaded in the default directory for downloads of Chrome.
Installation Note: After installing, Chrome doesn't add any extensions to the currently opened tabs (so, you have to reload the tabs that were opened before the extension was installed to work it to work on them).
Also, you can inspect the page. below is the step on how to access inspect Element.
Right-click anywhere on the webpage, and at the very bottom of the menu that pops up, you will see "Inspect." Click that.
Click the hamburger menu (the icon with 3 stacked dots) on the far
right of your Google Chrome toolbar, click More Tools, then select
Developer Tools.
Now if you want to find out the image you can simply find it by clicking CTRL+F and type like .png or .jpg any other extension that you want to find.
Here is the example.
You can click right click then click save image as and when you are saving it.under the name you will find the type.
Some websites make it almost impossible to get the image. I remember trying to save a background theme image from the old gmail.
If you find yourself in that situation, open the Developer Tools, go to Network, filter by Images then sort by Size descending, so you get the biggest image to be the first one, then hover over each file to find your image.
You want to sort by the file size, because most of the times, the big background images are the largest in size.
Just checked out your website out..
Image 1
You can find this right below the line where the section id is 1574286919067
Image 2
Similar to the first image, this is under the section 1589827030126
Image 3
Once again, under section 1589828889742
Hopes this helps you out.. Let me know if you want to have anymore queries about the same.
The images itself:
-> Image 1: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/tzJ4ad46RcSJinm7qbnO_Edited-image.png
-> Image 2: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/qqHvByszR1iu2rvfEQwg_defending2.jpg
-> Image 3: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/AWzmDDsWTlKOdoWPatUA_SovereignSelfDefenseBrandingPhotography-59.jpg
I am making a simple website and I am encountering a problem whenever I reload it.
I placed my menu at the middle of the screen and when you clicked it, it needs to go down to the content. My problem is, whenever I reload it, it would still go up and show the upper picture. What I want is that after one of the menu is pressed, the menu should now stay on the upper corner of the screen without showing the upper picture (Sample website -> http://ec2-54-84-168-45.compute-1.amazonaws.com/Teapop/)
It seems like my url code that directs it on a particular div (e.g menu#teapop_nav)` doesn't work as I expected after I deployed it on the hosting site even though it works well on my local build.
Without using any javascript code, is there a fix for this using html5/css3?
Thank you.
i just tested it on my computer (chrome & firefox) and it seems to work. And also on page refresh. The picture is always on the top.
im nearly ready to launch my website but i have a problem i cannot sort out.
ive built the whole website using wordpress and buddypress.
due to the picture in my header being very big and ending 450px down the page, you have to scroll down to access the buddypress menu in the relevant page (the one above the activity stream etc) which is exactly where i want it, removing my header is not an option, now the only problem i am having is that when i click the tabs in the buddypress menu say from activity stream to say my messages instead of the page laoding and taking me back to this section it takes me to the very top of my header so i have to re-scroll back down to the page i was after.
I need the page to stay at the same point after page reload so that the menus can be flicked through without having to scroll down to it again everytime a link is pressed. how do i achieve this? can you please help me sort this out….i have no problems adding or editing codes if i know what code needs changing and what to add to make it do this. thx
Im guessing that if you look in the url bar it is adding a # to the end of the url. You need to override the default click event on the a tag so that it doesnt jump you to the top. Im not sure how that will affect the stuff that is going on in the BuddyPress plugin.
Take a look at the signup section over here:
http://www.istockphoto.com/istock_login
Can you explain me please how can that moving box have been created?
Thank you
I believe if what your talking about is the box that shows up when you click on the login but, that is called lightbox. It's Javascript & Jquery that gets whatever content you want and makes a "frame" that overlays the rest of your page. There are lots of pre-made plugins witch if you want to replicate that effect I would sugest you to use because they are simple and easy.
http://www.fancybox.net/
http://www.lightbox.com.br/
http://www.lokeshdhakar.com/projects/lightbox2/
http://jquery.com/demo/thickbox/
http://www.shadowbox-js.com/
Is there a way to make it so the page doesn't shoot to the top of the site when clicking different links in the navigation bar?
e. So say I'm browsing my site and I'm scrolled down a little bit. Then I click on a link that navigates to a different page on my site. It automatically scrolls to the top. Is there a way to make it not do that.
instead of simply linking to a page, you could link to an anchor on that page using
link text
if that anchor is placed properly on the target page, you will not experience the jump back to top every time you link to another page. hope this helps
If this is the problem I'm picturing:
Change your links to point to <a href="#"> or <href="javascript:void(0);">
If you're going to different pages, you can use a link like:
My Link
Down in the page:
<div id="Section5">
Stuff!
</div>
This is the way that the web works. But still you can do a few work a rounds but each one will take a little work.
First option:
When you click on any link on the page, get the margin of the link from the top, then add it as a parameter to this link, and only then do the navigation. (the format of the line will be like page.html#margin-from-top).
Then in the new loaded page, you can look for this value and do the scroll. (I prefer the scrolling with a little duration).
Second option:
Another idea is to stay always on the same page and only change the content of it. you can do that with a little effects too.
It seems, too, like you might want to use a mooTools ScrollTo affect or possibly even invoke an AJAX method like SWFAddress.
Depending on exactly what you're trying to do, you may be able to accomplish it without using any fancy javascript, but it will depend on the inclusion of labels/etc. on your target page (as has been mentioned before).