Home CMS Tutorial DEDECMS How to solve the style of page turning button of Dedecms list pagelist

How to solve the style of page turning button of Dedecms list pagelist

Jan 08, 2020 am 09:25 AM
dedecms

How to solve the style of page turning button of Dedecms list pagelist

Dedecms list pagelist page turning button style how to solve?

Dedecms list pagelist The solution to the homepage and last page style of the page turning button

Recommended learning: 梦Weavercms

Dedecms list The page turning button uses {dede:pagelist listitem="index,end,pre,next,pageno" listsize="10"/}After generating the html, the first page of the list page is

<li >首页</li> 
<li class="thisclass">1</li> 
<li><a href=&#39;news_2.html&#39;>2</a></li> 
<li><a href=&#39;news_3.html&#39;>3</a></li> 
<li><a href=&#39;news_2.html&#39;>下一页</a></li> 
<li><a href=&#39;news_3.html&#39;>末页</a></li>
Copy after login

the last page It is:

<li><a href=&#39;news_1.html&#39;>首页</a></li> 
<li><a href=&#39;news_2.html&#39;>上一页</a></li> 
<li><a href=&#39;news_1.html&#39;>1</a></li> 
<li><a href=&#39;news_2.html&#39;>2</a></li> 
<li class="thisclass">3</li> 
<li >末页</li>
Copy after login

The CSS style sheet of the default template:

.dede_pages{ 
} 
.dede_pages ul{ 
float:left; 
padding:12px 0px 12px 16px; 
} 
.dede_pages ul li{ 
float:left; 
font-family:Tahoma; 
line-height:17px; 
margin-right:6px; 
border:1px solid #E9E9E9; 
} 
.dede_pages ul li a{ 
float:left; 
padding:2px 4px 2px; 
color:#555; 
display:block; 
} 
.dede_pages ul li a:hover{ 
color:#690; 
text-decoration:none; 
padding:2px 4px 2px; 
} 
.dede_pages ul li.thisclass, 
.dede_pages ul li.thisclass a,.pagebox ul li.thisclass a:hover{ 
background-color:#F8F8F8; 
padding:2px 4px 2px; 
font-weight:bold; 
}
Copy after login

You can see that ".dede_pages ul li a" and ".dede_pages ul li.thisclass" both have padding: 2px 4px 2px; Attribute but ".dede_pages ul li" does not. When ".dede_pages ul li" does not have the padding:2px 4px 2px; attribute, the two buttons

  • Home Page
  • and
  • Last Page
  • will be smaller than other buttons. Small, think about how ugly this situation is.

    The following will provide two solutions to the above problems

    The first method is solved through CSS. This solution is not to control the a tag and only add styles to the li. The code is as follows:

    .dede_pages ul{  
    }  
    .dede_pages ul li{  
    float:left;  
    height:18px;  
    line-height:18px;  
    padding:4px 10px;  
    margin-right:5px;  
    border:1px #b9cdff solid;  
    }  
    .dede_pages .thisclass{  
    background:#e3ebfe;  
    }
    Copy after login

    You can see that the code is very concise, but it is not very good for the user experience. It should be because the current button is displayed by li instead of a, so when the user clicks on the button, it will If you don't click on the text, you don't click on it. For a better user experience we need another solution.

    The second method is to modify the dede:pagelist related file arc.listview.class.php in the include folder:

    Open arc.listview.class.php and find the following code:

    //获得上一页和主页的链接 
            if($this->PageNo != 1) 
            { 
                $prepage.="<li><a href=&#39;".str_replace("{page}",$prepagenum,$tnamerule)."&#39;>上一页</a></li>rn"; 
                $indexpage="<li><a href=&#39;".str_replace("{page}",1,$tnamerule)."&#39;>首页</a></li>rn"; 
            } 
            else 
            { 
                $indexpage="<li >首页</li>rn"; 
            } 
            //下一页,未页的链接 
            if($this->PageNo!=$totalpage && $totalpage>1) 
            { 
                $nextpage.="<li><a href=&#39;".str_replace("{page}",$nextpagenum,$tnamerule)."&#39;>下一页</a></li>rn"; 
                $endpage="<li><a href=&#39;".str_replace("{page}",$totalpage,$tnamerule)."&#39;>末页</a></li>rn"; 
            } 
            else 
            { 
                $endpage="<li >末页</li>rn"; 
            }
    Copy after login

    Modify $indexpage="

  • Homepage
  • rn";$endpage="
  • Last Page
  • rn"; to $indexpage="< ;li class="thisclass">Homepagern";$endpage="
  • Last page
  • rn";After modification{dede:pagelist listitem ="index,end,pre,next,pageno" listsize="10"/}The generated html code is as follows:

    <li class="thisclass">首页</li> 
    <li class="thisclass">1</li> 
    <li><a href=&#39;news_2.html&#39;>2</a></li> 
    <li><a href=&#39;news_3.html&#39;>3</a></li> 
    <li><a href=&#39;news_2.html&#39;>下一页</a></li> 
    <li><a href=&#39;news_3.html&#39;>末页</a></li>
    Copy after login

    The second method is simpler and increases the user experience

    PS: Using the second method, there is no need to modify the CSS file.

    The above is the detailed content of How to solve the style of page turning button of Dedecms list pagelist. For more information, please follow other related articles on the PHP Chinese website!

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Article

    Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
    3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
    Nordhold: Fusion System, Explained
    3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Hot Topics

    Java Tutorial
    1664
    14
    PHP Tutorial
    1269
    29
    C# Tutorial
    1248
    24
    Where is the imperial cms resource network template? Where is the imperial cms resource network template? Apr 17, 2024 am 10:00 AM

    Empire CMS template download location: Official template download: https://www.phome.net/template/ Third-party template website: https://www.dedecms.com/diy/https://www.0978.com.cn /https://www.jiaocheng.com/Installation method: Download template Unzip template Upload template Select template

    How to upload local videos to dedecms How to upload local videos to dedecms Apr 16, 2024 pm 12:39 PM

    How to upload local videos using Dedecms? Prepare the video file in a format that is supported by Dedecms. Log in to the Dedecms management backend and create a new video category. Upload video files on the video management page, fill in the relevant information and select the video category. To embed a video while editing an article, enter the file name of the uploaded video and adjust its dimensions.

    How dedecms implements template replacement How dedecms implements template replacement Apr 16, 2024 pm 12:12 PM

    Template replacement can be implemented in Dedecms through the following steps: modify the global.cfg file and set the required language pack. Modify the taglib.inc.php hook file and add support for language suffix template files. Create a new template file with a language suffix and modify the required content. Clear Dedecms cache.

    What website can dedecms do? What website can dedecms do? Apr 16, 2024 pm 12:24 PM

    Dedecms is an open source CMS that can be used to create various types of websites, including: news websites, blogs, e-commerce websites, forums and community websites, educational websites, portals, other types of websites (such as corporate websites, personal websites, photo album websites, video sharing website)

    What loopholes does dedecms have? What loopholes does dedecms have? Aug 03, 2023 pm 03:56 PM

    DedeCMS is an open source content management system that has some potential vulnerabilities and security risks: 1. SQL injection vulnerability. Attackers can perform unauthorized operations or obtain sensitive data by constructing malicious SQL query statements; 2. File Upload vulnerability, attackers can upload files containing malicious code to the server to execute arbitrary code or obtain server permissions; 3. Sensitive information leakage; 4. Unauthenticated vulnerability exploitation.

    How to use dedecms How to use dedecms Apr 16, 2024 pm 12:15 PM

    Dedecms is an open source Chinese CMS system that provides content management, template system and security protection. The specific usage includes the following steps: 1. Install Dedecms. 2. Configure the database. 3. Log in to the management interface. 4. Create content. 5. Set up the template. 6. Manage users. 7. Maintain the system.

    How to change pictures in dedecms How to change pictures in dedecms Apr 16, 2024 pm 12:27 PM

    Steps to modify images in DedeCMS: Log in to the DedeCMS backend. Visit the System > Media Management page. Select the image you want to edit. Click the "Edit" button. Modify image titles, descriptions, tags, and copyright information. Crop or resize picture. Click the "Save" button to save changes. Return to the media management page and click the "Update Image Library" button to apply the changes to the site.

    How does dedecms implement template replacement? How does dedecms implement template replacement? Apr 16, 2024 pm 12:21 PM

    To implement template replacement in DedecMS, you need to perform the following steps: Determine the template file to be replaced. Common files include index.htm, list.htm and show.htm. Create a new template file, retaining the DedecMS markup. Upload the new template file, overwriting the original file. clear cache. Refresh the site to see the changes.

    See all articles