WordPress Sitenize Kolayca Özel CSS Ekleme

80 yorumBir Cevap Bırakın

1. Syed Balkhi says

   Tem 2, 2024 2:24 pm'de

   Hey WPBeginner readers,
   Did you know you can win exciting prizes by commenting on WPBeginner?
   Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
   You can get more details about the contest from here.
   Start sharing your thoughts below to stand a chance to win!

2. Mrteesurez says

   Nis 15, 2024 3:03 pm'de

   Based on the method you used when adding custom CSS in a block site, I notice the site still use some element of classic customizer through the link you shared ?
   I want to ask that can one just install classic widget plugin on a block theme to have easy access to the customizer for adding CSS b and other without using any custom link ?

   Yanıtla

   • WPBeginner Support says

     Nis 17, 2024 12:00 pm'de

     It would heavily depend on your specific theme. If your theme does not have the option in the customizer, we would recommend using one of the alternatives from this article.

     Yanıtla

     Yönetici

     • Mrteesurez says

       May 5, 2024 12:55 pm'de

       Well, most themes have the option in the customizer, I don’t know of block theme. Thanks.
       But I would recommend one to use page builder instead for full customization functionalities. Once I have learnt to use page builder, I rarely use custom CSS on pages.

       Yanıtla

3. Dennis Muthomi says

   Nis 8, 2024 2:26 pm'de

   Just to clarify – when you mention(in METHOD 1) that the CSS added via the Customizer is only available for that particular theme, does that mean the custom CSS code actually gets added to the current theme’s files?
   I’m not too tech-savvy, so I want to make sure I understand correctly before diving in.

   Yanıtla

   • WPBeginner Comments says

     Nis 10, 2024 3:46 pm'de

     Rather than being added to the theme files, the Customizer stores the CSS in the database and associates it with the theme.

     Yanıtla

     • Mrteesurez says

       May 5, 2024 1:03 pm'de

       I don’t know of this, thanks. That means the added custom CSS is not staying in the theme files rather in the database, so, why do we need to copy and re-paste the custom CSS code while changing the theme when it’s actually resides within the database ?

       Yanıtla

       • WPBeginner Support says

         May 13, 2024 11:20 am'de

         When adding the CSS code it is connected to the theme itself when you save. When you load a new theme it would load any CSS connected to that theme.

4. Qasim Saeed says

   Oca 12, 2024 3:26 pm'de

   Hello if I want to add a custom CSS on a specific page without any plugin then what? I think we add this via function? can you please tell me how to add CSS via functions.php and what is the best and secure way to add CSS for a specific page

   Yanıtla

   • WPBeginner Support says

     Oca 16, 2024 9:46 am'de

     You do not need to use functions to add CSS to specific pages, you would target the specific page in your CSS selector to have it only affect a single page on your site.

     Yanıtla

     Yönetici

5. Jiří Vaněk says

   Ara 25, 2023 7:00 am'de

   Is it better to insert your own CSS in WordPress using a template or using WPCode?

   Yanıtla

   • WPBeginner Support says

     Ara 28, 2023 8:33 am'de

     Both options are valid choices it depends on personal preference and if the theme has the option in the editor.

     Yanıtla

     Yönetici

     • Jiří Vaněk says

       Ara 29, 2023 5:45 pm'de

       Thanks for the clarification, I wasn’t sure if, for example, a snippet using WPCode would be faster for the site’s response than integrating it into the template itself. So if it doesn’t matter, I’ll probably stick to best practice and keep it integrated in the template.

       Yanıtla

6. Bavi says

   Haz 12, 2023 9:03 am'de

   The adding of css is no longer available for free plan any alternatives??

   Yanıtla

   • WPBeginner Support says

     Haz 12, 2023 11:34 am'de

     Our tutorials are for WordPress.org sites, we do not have specifics for WordPress.com at the moment. We would recommend taking a look at our guide below for the comparison between the two and if you wanted to look to transfer your site from WordPress.com to a self hosted WordPress.org site.

     https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/

     Yanıtla

     Yönetici

7. Ben says

   Nis 29, 2023 11:03 pm'de

   I never knew about the example.com/wp-admin/customize.php “trick”. Thanks! Worked like a charm!

   Yanıtla

   • WPBeginner Support says

     May 1, 2023 10:08 am'de

     Glad we could share this trick with you!

     Yanıtla

     Yönetici

8. Dani says

   Eyl 3, 2021 8:08 pm'de

   Hi there,

   I want to add custom CSS, but how can i remove it if smth goes wrong?

   Yanıtla

9. Bogdan says

   Haz 25, 2021 4:39 am'de

   Hey, this article is very good. One question though: Don’t I have to see the HTML page to add custom CSS? How do I add custom CSS if I don’t know the selectors and all of that?

   Yanıtla

   • WPBeginner Support says

     Haz 25, 2021 9:42 am'de

     We have a guide on using Inspect element that you can take a look at below for how to find the selectors:

     https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

     Yanıtla

     Yönetici

10. cymon says

    Ara 17, 2020 12:42 pm'de

    I am a new blogger. Is there a way to add page specific CSS code?

    Yanıtla

    • WPBeginner Support says

      Ara 18, 2020 10:02 am'de

      You would need to add the page ID as part of the CSS but yes you can.

      Yanıtla

      Yönetici

11. Jitin Mishra says

    Eyl 23, 2020 6:09 am'de

    Great article to add custom CSS in WordPress website. We are looking forward to such more informative posts

    Yanıtla

    • WPBeginner Support says

      Eyl 23, 2020 9:59 am'de

      Glad you found our guide helpful

      Yanıtla

      Yönetici

12. Mohsin says

    Ağu 23, 2020 3:35 pm'de

    I want to change my WordPress menu to mega menu with coding. Can i convert my website menu to mega menu using html, css and js? I don’t want to use a plugin for this work. If we add new functionality to WordPress website with custom coding, what are the best practices for which this custom work did not go ahead by updating theme or WordPress. Thanks!

    Yanıtla

    • WPBeginner Support says

      Ağu 25, 2020 10:15 am'de

      You would want to create a child theme to keep your changes safe but you may need some PHP coding. We have a guide on creating a child theme you can take a look at below:
      https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

      Yanıtla

      Yönetici

13. vijay v says

    Ağu 16, 2020 3:12 am'de

    can we add external CSS file( by moving custom CSS) to increase page speed( after I added custom CSS it decreased loading speed), if yes how to do it?

    thank you in advance

    Yanıtla

    • WPBeginner Support says

      Ağu 17, 2020 3:40 pm'de

      If we are understanding what you are looking for correctly, you would want to take a look at our article below:
      https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/

      Yanıtla

      Yönetici

14. billy king says

    Haz 1, 2020 9:31 pm'de

    Is “unorthodox” CSS allowed in Child Theme or Custom CSS?

    Yanıtla

    • WPBeginner Support says

      Haz 2, 2020 9:18 am'de

      As long as the CSS targets what is on your site you can use any CSS you like.

      Yanıtla

      Yönetici

15. Latonya Moore says

    May 15, 2020 11:50 am'de

    This is great but is there a way to only add css to one page? Example I only was to show or hide by hover or mouseover on one text.

    Yanıtla

    • WPBeginner Support says

      May 18, 2020 3:33 pm'de

      You would either need to add a CSS class to the specific object or add the page ID to your CSS to limit it to that specific page. For how to find that information you would want to take a look at our article below on how to use inspect element:
      https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

      Yanıtla

      Yönetici

16. shiva says

    Mar 15, 2019 1:33 am'de

    I have made some Changes in my website by editing some css codes in theme editor. What will happen if I update my wordpress to next version. Does it get error or gets back to base theme or my code will appear even after updating my wordpress just like before updation.

    Yanıtla

    • WPBeginner Support says

      Mar 18, 2019 3:59 pm'de

      If you added your CSS in the Appearance>Customizer>Additional CSS area then your CSS changes will remain when you update your site.

      Yanıtla

      Yönetici

17. Jo says

    Eki 16, 2018 7:36 pm'de

    I have not quite finished building my website, but have updated from the free version so I can use css to make changes. My site is not yet live. With the upgrade to the premium version the update button has now changed to publish. Does this mean that when I click on publish to save any changes it will make my site live?
    Also, I can’t remember which theme I used, how do I find out which theme I am using?
    Thanks

    Yanıtla

    • WPBeginner Support says

      Eki 17, 2018 11:22 am'de

      It sounds like you are on WordPress.com, if you publish a post then it will be viewable to those who can see your site. With WordPress.com for a private site you are limited to: https://en.support.wordpress.com/settings/privacy-settings
      You should be able to see the theme that is active under Appearance>Themes

      Yanıtla

      Yönetici

18. Bruce William Taylor says

    Haz 11, 2018 2:41 am'de

    “The tab will slide to show you a simple box where you can add your custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied on your website’s live preview pane.”

    I already know WHERE to add the CSS. How do I know what CSS to add? How do I know what the “valid CSS rules” are?

    Yanıtla

    • WPBeginner Support says

      Haz 11, 2018 10:55 am'de

      Hey Bruce,

      For that you will need to learn some basic CSS. There are several websites that have step by step CSS tutorials for beginners. We recommend w3schools as they allow you to practice CSS with a live try it out box.

      Yanıtla

      Yönetici

19. Ali says

    Haz 2, 2018 10:11 am'de

    Where is the Customize CSS Code storage because I have lost it while a transfer to a new hoster?

    Yanıtla

20. mahaveer says

    May 25, 2018 4:53 am'de

    i want to add external css and add images in css…..

    Yanıtla

21. Muhammad Adil says

    Nis 14, 2018 1:18 pm'de

    What was the Bonus method?
    Is that any Plugin I didn’t get that. Will you please ask me ?
    Thanks

    Yanıtla

22. Aditya Khuteta says

    Nis 1, 2018 5:56 am'de

    Hi there! I want to change the size of price text on my website becuase the price text is too small there. Please guide me to do so.
    Thanks

    Yanıtla

23. Frank Lurz says

    Mar 30, 2018 1:45 pm'de

    2 Questions:

    1. Just so I’m clear, “plugins” are substitutes for writing CSS, a difficult task for those of us who know nothing about CSS — is that right?

    2. Plugins listed for downloading on the WP plugins page are available for installation only to subscribers who have paid for the “Buisness” Plan, is that right?

    Yanıtla

    • WPBeginner Support says

      Mar 30, 2018 7:37 pm'de

      Hi Frank,

      1. No, plugins are not substitute for writing custom CSS. You can write custom CSS without installing plugins. Please see our guide on what are WordPress plugins and how do they work for more details.

      2. IF you are using WordPress.com, then yes you will need to upgrade to business plan. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.

      Yanıtla

      Yönetici

24. Annie Mitchell says

    Oca 21, 2018 1:18 pm'de

    Hi,

    I am a novice when it comes to building and designing websites and have no knowledge of css. I am using the Sydney theme on my website – and I have somehow managed to turn my paragraph font white. I have googled and notice a gentleman had the same issue. He fixed it downloading a plugin and using a custom css however I have tried and had no luck.

    The css which he advised using is –

    .entry-page p, .entry-post p {
    color: black !important;
    margin: 0 !important;
    padding: 0 !important;
    }

    but I am not sure why it is not working for me. Any help would be much appreciated.

    Thanks,

    Annie

    Yanıtla

    • WPBeginner Support says

      Oca 21, 2018 2:00 pm'de

      Hi Annie,

      First we will recommend you to turn off all your WordPress plugins by deactivating them. After that, visit your website to see if this resolved your issue. If it did, then this means a setting in one of your plugins was causing the problem. If it doesn’t solve the issue, then try switching to a default theme like Twenty Seventeen. If that does fix your issue, then it means that some where in your theme you have changed the font settings.

      If nothing works out, then you can try this custom CSS:

      p { 
      color:#000; 
      }

      Hosted with ❤️ by WPCode

      
      1-click Use in WordPress

      Yanıtla

      Yönetici

25. Jose says

    Oca 16, 2018 3:48 am'de

    One of the plugins (Simple Custom CSS) hasn’t been updated for 2 years which in the world of WordPress plugins is a very long time. This is a security risk so I would personally look for an alternative.

    Yanıtla

26. Rebecca says

    Oca 12, 2018 9:51 am'de

    Hi
    Sorry i don’t know anything about css and I am trying to solve a problem with not being able to search for plugins, but that is another story! I am posting here now because i am getting this message when i go to appearance / edit css / aditional css

    ” There is 1 error which must be fixed before you can save.
    Update anyway, even though it might break your site?”

    Is this something i shoudl worry about?

    the text in the box below it reads …

    and just here there is a red fullstop

    Hope someone can help.

    Thank you

    Yanıtla

    • WPBeginner Support says

      Oca 13, 2018 2:29 pm'de

      Hi Rebecca,

      You can copy the CSS and paste it in a text file and save it as backup. Now delete every thing in Additional CSS box and start adding your custom CSS one rule at a time until the error appears again. This will help you locate the error and fix it.

      Yanıtla

      Yönetici

27. James says

    Oca 10, 2018 1:50 am'de

    This no longer works for free accounts. The CSS option is no longer there and you need a business account to install a relevant plugin.

    Yanıtla

    • WPBeginner Support says

      Oca 13, 2018 2:58 pm'de

      Hi James,

      You are probably using WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.

      Yanıtla

      Yönetici

28. scott says

    Ara 17, 2017 11:32 am'de

    Before WP version 4.9, I used to be able to cut and paste my custom CSS (from the WP customizer) and paste it into Windows Notepad (and it would keep the formatting. I did this often to save it as a back up when I was adding new custom CSS — in case I made a mistake.

    Now when pasting it in Notepad, it just runs all the CSS together without the line-by-line formatting in Notepad.

    Any idea why or how I can fix it? I already have “word wrap” mode set in Notepad.
    Thanks.

    Yanıtla

    • WPBeginner Support says

      Ara 17, 2017 8:16 pm'de

      Hi Scott,

      You can try saving the code in other text editors like Notepad++. If the problem persists, then try WordPress troubleshooting tips.

      Yanıtla

      Yönetici

29. Joe MacMillan says

    Ara 8, 2017 2:57 pm'de

    This site is really good. My site didn’t have any link colors so I used this code /* unvisited link blue */
    a:link {
    Color: #196380;
    }

    /* visited link green */
    a:visited {
    color: #248f24;
    }

    /* mouse over link orange */
    a:hover {
    color: #ff3300;
    }

    /* selected link red*/
    a:active {
    color: #cc0000;
    }

    but it turned colors on for everything that is a link such as menu’s into a color.

    I only want the colors for linking.

    I would appreciate any help with this. Thanks

    Yanıtla

    • WPBeginner Support says

      Ara 9, 2017 6:27 pm'de

      Hi Joe,

      In your CSS, you didn’t define which areas should have links in these colors, which makes them apply to entire body. To figure out which areas you need to target, you will need to use the Inspect Tool to find out the CSS class used by your theme for the content block.

      Let’s suppose the content block in your theme has a css class site-content, you will use it in your CSS like this:

      .site-content a:link {
      color: #196380; 
      }  
      
      .site-content a:visited {
      color: #248f24;
      }
      
      .site-content a:active { 
      color: #cc0000;
      }  
      
      .site-content a:hover { 
      color: #ff3300;
      }
      

      Hosted with ❤️ by WPCode

      
      1-click Use in WordPress

      Hope this helps

      Yanıtla

      Yönetici

30. Rob says

    Kas 11, 2017 7:57 am'de

    I love your site!

    Thanks for all the helpful articles.

    I have a question regarding my wordpress premium plan.

    I want to add the following script to my site.

    var refTagger = {
    settings: {
    bibleVersion: “NKJV”
    }

    Can I add this to the custom css?

    I don’t have the ability to access the header or footer in this plan

    Thanks,

    Rob

    Yanıtla

    • WPBeginner Support says

      Kas 12, 2017 3:41 pm'de

      Hi Rob,

      Nope, you cannot. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.

      Yanıtla

      Yönetici

31. sammy says

    Haz 30, 2017 11:18 pm'de

    this is really a great article, i will have to start learning how to make my own css for my site

    Yanıtla

32. Thomas says

    May 5, 2017 6:47 am'de

    Hello,

    this feature isn’t active for the site admin on a multisite WordPress network.
    Do you think that activating it for site admin (with this plugin for example:) would create a security issue?

    Thank you!

    Yanıtla

    • WPBeginner Support says

      May 7, 2017 11:53 pm'de

      Hey Thomas,

      Yes you can use a plugin to add custom CSS.

      Yanıtla

      Yönetici

      • Thomas says

        May 8, 2017 3:57 am'de

        Hi,

        yes I know (I have already used the very good Simple Custom CSS plugin), but I would prefer to use the native function since it is implemented in WordPress.
        However, this function is only available for the network admin and not for the site admin on a multisite installation.
        The rights can be easily changed to allow site admin to add their own custom CSS in the customizer (with the native WP function) (see this plugin: http://www.wordpress.org/plugins/multisite-custom-css/), and I wonder if this would create a security issue (based on the assumption that I can’t trust site admin)?

        Yanıtla

        • WPBeginner Support says

          May 8, 2017 9:57 pm'de

          Hey Thomas,

          Sorry, we totally misunderstood your question

          We agree that will be a concern, this is why the feature is turned off. If you turn it on, then the users will be able to add unfiltered CSS. You should keep it switched off.

33. Brice says

    Nis 17, 2017 10:30 am'de

    I don’t know much about code so I’m just wondering if I make changes and click “save and publish”, is there a way to get the original code back if I don’t like the changes or do I need to copy and save the original code in the event I want to restore it?

    Yanıtla

34. Ruth Billheimer says

    Nis 6, 2017 12:04 pm'de

    This is probably really naive, I don’t know much about code, so bear with me.. In the customise additional css, can you put in different things? I mean I have already put something in there that will change some of the colours. Now I want to put in something that will change the width of the page. (I am getting these bits of code from very helpful people, I know nothing!)
    So will both of these things work? Or can you only change one thing? It doesn’t look like the page width has changed

    Yanıtla

35. Jos Schuurmans says

    Mar 31, 2017 5:19 am'de

    Hi there,

    It used to be possible to edit style.css from within WP admin, under the Appearance menu.

    On WP multisite it was through the network’s themes submenu. Has that feature been depricated?

    Cheers,
    Jos

    Yanıtla

36. Judy says

    Kas 5, 2016 10:18 pm'de

    Great post, thanks!

    Can anybody help me with this? I did a small customization on my logo using CSS Hero. Then I’ve copied these exact 9 strings of code into my Simple Custom CSS plugin, after deactivating CSS Hero. I thought I could reproduce the same CSS Hero customization on my logo using Simple Custom CSS, but instead it’s not working.

    I refreshed the page and cleared the cache, but the customization still doesn’t take effect. Why’s that?

    Thanks,

    Judy

    Yanıtla

37. Robin says

    Eki 26, 2016 2:11 pm'de

    This is all that is on my CSS Style Sheet.
    /*
    Welcome to custom CSS

    To learn how this works, see
    */

    Do I erase his and add my new font code? Help????

    Yanıtla

    • WPBeginner Support says

      Eki 26, 2016 6:27 pm'de

      Yes. These are just comments to help new users get started.

      Yanıtla

      Yönetici

38. Paul H. says

    Eki 8, 2016 8:37 am'de

    OUTSTANDING PLUGIN!!!

    I spent much time trying to get the built in WP Editor to “style” my custom page, with no luck…

    I searched for a plugin to see if there was one and found yours… within minutes I’d installed your plugin and activated it, then input my CSS, clicked update and then refreshed my custom page… it’s perfect!

    A+++

    Yanıtla

39. Ian says

    Eyl 28, 2016 8:37 pm'de

    Hi Guys,

    I’ve installed the Simple custom CSS plugin & activated it. I have a table created on one of my webpages that I wanted to have a border around it.

    As a result, I have added the following code to my simple custom CSS plugin

    table {
    border: 2px solid black;
    }

    and updated the Custom CSS but nothing happened – I still don’t get any border on my webpage table.

    Any suggestions?

    Regards

    Ian

    Yanıtla

    • Molly Setzer says

      Kas 29, 2016 12:27 pm'de

      Hey Ian,

      It’s likely that you are not calling it by the correct css selector. Use the most defined selector to grab the element. For example, if your table has a class of “info” then calling it by the more specific table.info will help you reach the element. Check if it has more selectors in the html.

      Yanıtla

40. ramneet says

    Tem 29, 2016 2:04 am'de

    Thanks for sharing. it just wonderful way of learning WordPress i like it.

    Yanıtla

41. Estee Peter says

    Haz 30, 2016 8:00 am'de

    How do i add custom css via my existing specific website plugin

    this is the following code

    .mobileonly {
    display: none;
    }

    @media screen and (max-width: 480px) {
    .mobileonly {
    display: inline;
    }
    }

    .hidemobileonly {
    display: inline;
    }

    @media screen and (max-width: 480px) {
    .hidemobileonly {
    display: none;
    }
    }

    Yanıtla

42. Gary Zielke says

    Haz 28, 2016 2:26 am'de

    Does the Custom CSS plugin work on individual pages.
    i.e can I add style to a single page and not the whole theme?

    Thanks

    Yanıtla

    • WPBeginner Support says

      Haz 29, 2016 6:50 am'de

      No it doesn’t work on individual pages.

      Yanıtla

      Yönetici

43. Tori Tran says

    Eyl 28, 2015 9:10 pm'de

    thank you ^^

    Yanıtla

44. Russell Bruce says

    Eyl 27, 2015 1:19 pm'de

    Would it not be useful to explain what CSS does and why it is useful

    Yanıtla

45. Joey says

    Eyl 27, 2015 10:54 am'de

    Thanks, I wish I realized this sooner because I’ve made all my css changes on the style.css file since I’m making the changes locally but are you saying that if for some reason Genesis decides to update the particular child theme I used I will lose those changes? I don’t know if I’ve ever seen them update their child themes although I’ve only been using Genesis for a few months so I suppose it is entirely possible they will update certain ones here and there. I think going forward I’ll make my changes in the plugin especially if the site is live.

    Yanıtla

    • suzie says

      Nis 28, 2017 7:12 pm'de

      Use the theme you like and create a ‘child theme’
      The child theme is then unique to your website.
      Make any changes only on your child theme.
      The theme designer may update their theme, but your changes will remain. (Depending on the designers update you may need to tweak your changes, but that’s unlikely).

      Yanıtla

46. Rodney says

    Eyl 24, 2015 11:35 pm'de

    Great article.

    I just wanted to add here. There’s a lot of option here specially sites running in WordPress, building/creating custom css is simple. Most wordpress themes usally support adding custom css without having to create or add additional plugins.

    I also agree, and the best option here is using a child theme instead.

    thanks

    Yanıtla